javascript - 动态应用 css 样式

Question

你好，我从 xml 文件中提取样式属性名称（在本例中为颜色和字体），所以最后我有变量style1=color和style2= font；

但是当我编写以下代码时 - 它不起作用 - 程序说这style1是未定义的。我该如何改变呢？

var header=document.createElement("div");
    header.setAttribute("id", "header1");


   header.style.style1=headerstyles[i].nodeValue;

Answer 1

由于style1是一个保存实际 css 属性名称（如颜色/字体）的变量，因此您不能使用.（点）运算符，您需要使用[]来指定属性。

header.style[style1]=headerstyles[i].nodeValue;

Answer 2

因为风格本身就是一个对象。你想要的是：

header.style.setAttribute('color','red');

但 IE 不支持样式对象的 setAttribute。

所以使用完全支持的跨浏览器：

header.style.cssColor = '红色';

Answer 3

你需要使用

header.style.color
&
header.style.fontFamily, header.style.fontSize

更改您提到的样式。

您还可以使用CSS 文本

header.style.cssText