Comment puis-je ajouter du style au contenu en JavaScript?

Bonjour, j'ai travaillé dans un fichier JavaScript et mon contenu a été utilisé avec des phrases. Maintenant, je veux changer le style de ces phrases. La première fonction (voir fonction swapFE) Je souhaite changer le style de police de la phrase nœud à la normale. Et modifiez la couleur de la phrase nœud à la valeur de couleur (155, 102, 102). La deuxième fonction (voir swapEF) Je souhaite changer le style de police en italique et la couleur de la police en noir. Comment écrivez-vous? Et est-ce que je l'écris dans mes fonctions en JavaScript ou les changements de style sont-ils appliqués directement dans CSS ou HTML?

Voici les deux fonctions auxquelles je souhaite appliquer les changements de style à:

//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 vous pouviez même me montrer une référence où je trouve ces propriétés géniales.

Merci!

 obj.style.whicheverProperty = "value" 

par exemple:

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

Le mot-clé google que vous recherchez est HTML DOM (document object model), qui définit les différents styles en tant que propriétés du membre de style d'un objet.

Vous pouvez également modifier une classe à l'élément ..

Dans la fonction swapFE

 phrase.className = 'english'; 

Et dans la fonction swapEF

 phrase.className = 'french'; 

Et dans votre fichier css

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

J'ai compris comment ajouter les changements de style. En écrivant parent.childNodes [1] .style.fontStyle = "normal" ou "italique" (selon la fonction); Et 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"; 

En utilisant element.style vous pouvez modifier css de Javascript.

Par exemple:

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

Et pour vous aider à trouver la syntaxe exacte de l'attribut, voici les propriétés CSS vers la conversion de référence JavaScript .