¿Cómo agrego estilo al contenido en JavaScript?

Question

He estado trabajando en un archivo JavaScript y mi contenido ha estado trabajando con frases. Ahora quiero cambiar el estilo de esas frases. La primera función (ver función swapFE) Quiero cambiar el estilo de fuente del nodo de frase a normal. Y cambie el color de la frase nodo al valor del color (155, 102, 102). La segunda función (ver swapEF) Quiero cambiar el estilo de fuente a cursiva y el color de fuente a negro. ¿Cómo escribo esto? ¿Y lo escribo dentro de mis funciones en JavaScript o los cambios de estilo se aplican directamente en CSS o HTML?

Estas son las dos funciones que desea aplicar los cambios en el estilo de:

//this function changes the French phrase to an English phrase. 
function swapFE(e) { 
     var phrase = e.srcElement; 
     //phrase.innerText = english[phrase.id]; 
    var parent = phrase.parentNode; 
    //childNodes[0] is the number of the phrase +1 
    var idnum = parent.childNodes[0]; 
    //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. 
    var phrasenum = parseInt(idnum.innerHTML)-1; 
    phrase.innerText = english[phrasenum]; 

    } 


function swapEF(e) { 
     var phrase = e.srcElement; 
     //phrase.innerText = english[phrase.id]; 
    var parent = phrase.parentNode; 
    var idnum = parent.childNodes[0]; 
    var phrasenum = parseInt(idnum.innerHTML)-1; 
    phrase.innerText = french[phrasenum]; 

Si usted podría incluso me acaba de apuntar a una referencia de donde puedo encontrar estas propiedades que sería genial.

Answer 1

Descubrí cómo agregar los cambios de estilo. Al escribir parent.childNodes [1] .style.fontStyle = "normal" o "cursiva" (según la función); y parent.childNodes [1] .style.color = "black".

//this function changes the French phrase to an English phrase. 
    function swapFE(e) { 
      var phrase = e.srcElement; 
      //phrase.innerText = english[phrase.id]; 
      var parent = phrase.parentNode; 
      //childNodes[0] is the number of the phrase +1 
      var idnum = parent.childNodes[0]; 
      //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. 

     var phrasenum = parseInt(idnum.innerHTML)-1; 
     phrase.innerText = english[phrasenum]; 
     parent.childNodes[1].style.fontStyle= "normal"; 
     //Below is the correct way to write an RGB style. 
     parent.childNodes[1].style.color = "rgb(155, 102, 102)"; 
} 


function swapEF(e) { 
     var phrase = e.srcElement; 
     //phrase.innerText = english[phrase.id]; 
     var parent = phrase.parentNode; 
     var idnum = parent.childNodes[0]; 
     var phrasenum = parseInt(idnum.innerHTML)-1; 
     phrase.innerText = french[phrasenum]; 
     parent.childNodes[1].style.fontStyle= "italic"; 
     parent.childNodes[1].style.color= "black"; 

Answer 2

obj.style.whicheverProperty = "value" 

por ejemplo:

document.getElementById('mydiv').style.fontVariant = "italic"; 

La palabra clave de Google que estás buscando es HTML DOM (Document Object Model), que define los diferentes estilos como propiedades de estilo miembro de un objeto.

Answer 3

Usando element.style puede cambiar css de Javascript.

Por ejemplo:

document.getElementById('mydiv').style.backgroundColor = 'red'; 

Y para ayudarle a encontrar la sintaxis exacta para el atributo, aquí está CSS Properties To JavaScript Reference Conversion.

Answer 4

También puedes, simplemente cambiar una clase al elemento ..

en la función swapFE

phrase.className = 'english'; 

y en la función swapEF

phrase.className = 'french'; 

y en su archivo css

.english{ color:#9b6666; } 
.french{ font-style:italic; color:#000; }