如何在 JavaScript 中为内容添加样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2170323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add style to content in JavaScript?
提问by Ashley
I have been working in a JavaScript file and my content has been working with phrases. Now I want to change the style of those phrases. The first function (see function swapFE) 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 italic and the font color to black. How do I write these? And do I write it within my those functions in JavaScript or do style changes get applied directly within CSS or HTML?
我一直在处理 JavaScript 文件，我的内容一直在处理短语。现在我想改变这些短语的风格。第一个函数（见函数swapFE）我想把短语节点的字体样式改成普通的。并将短语节点的颜色更改为颜色值 (155, 102, 102)。第二个函数（参见 swapEF）我想将字体样式更改为斜体，将字体颜色更改为黑色。我怎么写这些？我是在 JavaScript 的这些函数中编写它，还是直接在 CSS 或 HTML 中应用样式更改？
These are the two functions I want to apply the style changes to:
这是我想要将样式更改应用于的两个函数：
//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 even just point me to a reference where I can find these properties that'd be great.
如果您甚至可以将我指向一个参考资料，我可以在其中找到这些很棒的属性。
采纳答案by Ashley
I figured out how to add the style changes. By writing parent.childNodes[1].style.fontStyle= "normal" or "italic" (depending on the function); and parent.childNodes[1].style.color = "black".
我想出了如何添加样式更改。通过编写 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";
回答by Tor Valamo
obj.style.whicheverProperty = "value"
for instance:
例如：
document.getElementById('mydiv').style.fontVariant = "italic";
The google keyword you're looking for is HTML DOM (document object model), which defines the various styles as properties of an object's style member.
您要查找的 google 关键字是 HTML DOM（文档对象模型），它将各种样式定义为对象样式成员的属性。
回答by Gabriele Petrioli
You could also just change a class to the element ..
您也可以将一个类更改为元素 ..
in the swapFE function
在 swapFE 函数中
phrase.className = 'english';
and in the swapEF function
并在 swapEF 函数中
phrase.className = 'french';
and in your css file
并在您的 css 文件中
.english{ color:#9b6666; }
.french{ font-style:italic; color:#000; }
回答by Soufiane Hassou
Using element.styleyou can change css from Javascript.
使用element.style您可以从 Javascript 更改 css。
For example:
例如：
document.getElementById('mydiv').style.backgroundColor = 'red';
And to help you find the exact syntax for the attribute, here's CSS Properties To JavaScript Reference Conversion.
为了帮助您找到属性的确切语法，这里是CSS 属性到 JavaScript 引用转换。
