Geek Answers Handbook

How to add style to content in JavaScript?

I worked in a JavaScript file and my content worked with phrases. Now I want to change the style of these phrases. The first function (see swapFE function). I want to change the font style of the phrase node to normal. And change the color of the phrase node to the color value (155, 102, 102). The second function (see SwapEF). I want to change the font style to italics and the font color to black. How do i write? And am I writing it in my functions in JavaScript or are style changes applied directly in CSS or HTML?

These are the two functions that I want to apply to style changes:

    //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];

If you could just give me a link where I can find these properties that would be nice.

+5
4

, . parent.childNodes [1].style.fontStyle = "normal" "italic" ( ); parent.childNodes [1].style.color = "".

//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";
0
obj.style.whicheverProperty = "value"

:

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

google, , - HTML DOM ( ), .

+10

.

swapFE

phrase.className = 'english';

swapEF

phrase.className = 'french';

css

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

element.style, css Javascript.

:

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

, CSS JavaScript Reference Conversion.

0
source

More articles:


All Articles