如何在JavaScript中添加樣式到內容？

Question

我一直在JavaScript文件中工作，我的內容一直在使用短語。現在我想改變這些短語的風格。第一個函數（請參閱函數swapFE）我想將短語節點的字體樣式更改爲正常。並將短語節點的顏色更改爲顏色值（155,102,102）。第二個函數（請參閱swapEF）我想將字體樣式更改爲斜體，將字體顏色更改爲黑色。我如何寫這些？我是否會在JavaScript中使用這些函數編寫它，或者將樣式更改直接應用於CSS或HTML中？

這是兩個功能，我想樣式更改應用到：

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

如果你甚至可以只指點一個參考在哪裏可以找到這些特性那簡直太好了。

Answer 1

我想出瞭如何添加樣式更改。通過編寫parent.childNodes [1] .style.fontStyle =「normal」或「italic」（取決於函數）;和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" 

例如：

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

您正在尋找谷歌關鍵字是HTML DOM（文檔對象模型），它的各種風格定義爲一個對象的樣式成員的屬性。

Answer 3

使用element.style您可以從Javascript更改CSS。

例如：

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

，並幫助您找到該屬性的精確語法，這裏的CSS Properties To JavaScript Reference Conversion。

Answer 4

你也可以只改變了一個類的元素..

在swapFE功能

phrase.className = 'english'; 

，並在swapEF功能

phrase.className = 'french'; 

，並在你的CSS文件

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