如何在JavaScript中添加样式到内容？

我一直在JavaScript文件中工作，我的内容一直在使用短语。现在我想改变这些短语的风格。第一个函数（请参阅函数swapFE）我想将短语节点的字体样式更改为正常。并将短语节点的颜色更改为颜色值（155,102,102）。第二个函数（请参阅swapEF）我想将字体样式更改为斜体，将字体颜色更改为黑色。我如何写这些？我是否会在JavaScript中使用这些函数编写它，或者将样式更改直接应用于CSS或HTML中？如何在JavaScript中添加样式到内容？

这是两个功能，我想样式更改应用到：

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

如果你甚至可以只指点一个参考在哪里可以找到这些特性那简直太好了。

来源

2010-01-31 Ashley

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

来源

2010-01-31 20:30:28 Ashley

obj.style.whicheverProperty = "value"

例如：

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

您正在寻找谷歌关键字是HTML DOM（文档对象模型），它的各种风格定义为一个对象的样式成员的属性。

来源

2010-01-31 02:39:03

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

例如：

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

，并帮助您找到该属性的精确语法，这里的CSS Properties To JavaScript Reference Conversion。

来源

2010-01-31 02:40:04

我把这个放在我的JavaScript函数中吗？因为我试过了，它不起作用。此外，如果我有多个样式属性，我是否为每个样式创建一个新的document.getElementBy ...或者有没有办法在一个document.getElementBy ...中列出多个样式属性？ – Ashley 2010-01-31 03:13:45

参考资料已下载到[linkrot]（https://en.wikipedia.org/wiki/Link_rot） – 2017-08-28 18:07:52

你也可以只改变了一个类的元素..

在swapFE功能

phrase.className = 'english';

，并在swapEF功能

phrase.className = 'french';

，并在你的CSS文件

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

来源

2010-01-31 02:46:03

如何在JavaScript中添加样式到内容？

回答

相关问题