0

Yo estoy varado en un código con **javascript ** el cual consiste en darle a una variable una fuente cursiva y luego dar display con un document.write().

<script>
let saludos="hola mundo";

saludos.style.fontFamily="cursive";  
document.write(saludos);
</script>
2
  • saludos es un humilde string. ¿Por qué supones que le puedes poner estilos como si fuese un elemento del DOM?
    – Alfabravo
    el 5 jul. 2020 a las 22:38
  • Jjjjj es cierto. No sé que iba a inventar el 6 jul. 2020 a las 14:45

4 respuestas 4

3

De hecho te debería estar dando este error:

TypeError: Cannot set property 'fontFamily' of undefined

Pues estás tratando de darle estilos CSS a un elemento que es la variable que no corresponde al DOM, sin contar que no es recomendable usar document.write pues esto eliminará el contenido de la web y lo reemplazará por lo que le pases como argumento.

Mejor:

  • Declara tu texto en una variable
  • Obtén una etiqueta del DOM en una variable
  • Asignale a dicha variable por medio de innerText el texto de la variable

Es decir, en tu HTML tienes esto

<h1 id="titulo"> </h1>

En tu JS lo recuperas así

let titulo = document.getElementById("titulo");
let texto = " hola mundo ";

Y lo asignas así

 titulo.innerText = texto;

Y ahora sí a la variable título le puedes agregar estilos CSS

1
  • Thank's you right 👍🏼 el 6 jul. 2020 a las 14:45
1

Tienes que tener en cuenta que document.write imprime un literal al contenido. Para realizar lo que quieres deberás hacerlo un poco más complejo.

No soy experto pero la solución que yo suelo llevar a cabo cuando necesito hacer esto es lo siguiente:

let saludos="<p id='saludo'>hola mundo</p>";

document.write(saludos);
document.getElementById('saludo').style.color='red';

Como puedes comprobar dista un poco de lo que tienes por los siguientes motivos:

  • El contenido de tu variable debe contener una etiqueta con id (o class) al que poder asociar el estilo. Si conoces CSS, sabes que los estilos se asignan así y pensarlo de esa manera te facilitará el trabajo también con javascript.

  • Primero realiza un document.write antes de asignar un estilo.

  • Como en la variable tenemos un <p> con id='saludo', asignamos el estilo a esa etiqueta.

1

Estás confundiendo las propiedades font-family es para establecer una fuente, font-style es para establecer un estilo de fuente, esa es la propiedad que deberías cambiar.

<div style="font-family: 'Courier New'">Esto es un texto de prueba</div>
<div style="font-style: oblique">Esto es un texto de prueba en cursiva</div>

0
1

Me parece que no puedes aplicar estilos a una variable pero sí a un elemento html a través de su id.

 function cambiaEstiloFuente() {
          document.getElementById("miParrafo").style.color = "red";
          document.getElementById("miParrafo").style.fontFamily = "mono";
          document.getElementById("miParrafo").style.fontWeight = "bold";
          document.getElementById("miParrafo").style.fontSize = "1.5em";
        }
<!DOCTYPE html>
  <html>
    <body>

      <p id="miParrafo">Respuesta Ganadora!</p>

      <button type="button" onclick="cambiaEstiloFuente()">Cambia estilo al párrafo</button>
    </body>
  </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.