动态应用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（ '颜色'， '红'）;

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

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

header.style.cssColor ='red';

Answer 3

您需要使用

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

更改您提到的样式。

您也可以使用CSS Text

header.style.cssText