如何在 JavaScript 中为内容添加样式？答案

【问题标题】：How do I add style to content in JavaScript?如何在 JavaScript 中为内容添加样式？
【发布时间】：2011-01-11 08:04:15
【问题描述】：

我一直在处理 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];

如果您甚至可以向我指出一个参考，我可以在其中找到这些属性，那就太好了。

【问题讨论】：

标签： javascript fonts coding-style colors

【解决方案1】：

obj.style.whicheverProperty = "value"

例如：

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

您要查找的 google 关键字是 HTML DOM（文档对象模型），它将各种样式定义为对象样式成员的属性。

【讨论】：

【解决方案2】：

您也可以将一个类更改为元素..

在swapFE函数中

phrase.className = 'english';

在swapEF函数中

phrase.className = 'french';

在你的css文件中

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

【讨论】：

【解决方案3】：

我想出了如何添加样式更改。通过编写 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";

【讨论】：

【解决方案4】：

使用element.style，您可以从 Javascript 更改 css。

例如：

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

为了帮助您找到该属性的确切语法，这里是CSS Properties To JavaScript Reference Conversion。

【讨论】：

我是否将它放在我的 JavaScript 函数中？因为我试过了，没用。另外，如果我有多个样式属性，我是为每个创建一个新的 document.getElementBy... 还是有办法在一个 document.getElementBy... 中列出多个样式属性？