动态应用css样式

Question

hello I extract the style attributes names from xml file (color and font in this case ) so at the end I've got variable style1=color and style2= font ;

But when I wrote the following code - it doesn't work - the programme says that style1 is undefined. How can I change that?

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


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

Answer 1

Since style1 is a variable holding the actual css property name like color/font, you cannot use the . (dot) operator, you need to use [] to specify the property.

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

Answer 2

Because style itself is an object. What you want is:

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

But IE doesn't support setAttribute for style objects.

So use the fully cross-browser supported:

header.style.cssColor = 'red';

Answer 3

You need to use

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

to change the styles you mentioned.

You can also use CSS Text

header.style.cssText