Whats up with setAttribute on IE

[Aaron Gray]

Whats going on with setAttribute on IE it appears to work on some examples
and working code but not on other code that I am writting ?

<style>
.foo {
font-size: 200%;
}
</style>


var e = document.createElement( "div");
e.setAttribute( "class", "foo"); // fails
e.setAttribute( "className", "foo"); // okay
e.setAttribute( "style", "font-size: xx-large"); // fails
e.setAttribute( "style.fontSize", "xx-large"); //fails
e.setAttribute( "style", "font-size: 24pt;"); //fails
e.style.fontSize = '24pt'; // okay
e.className = 'foo'; // okay
e.appendChild( document.createTextNode( "Text Text Text"));
document.body.appendChild( e);

Anyone help fill in the gap in my head !

Many thanks in advance,

Aaron

 

[Ian Collins]

Whats going on with setAttribute on IE it appears to work on some examples
and working code but not on other code that I am writting ?

Don't use setAttribute() for built in attributes, just set the attribute
value.

var e = document.createElement( "div");
e.setAttribute( "class", "foo"); // fails

Use e.className.

e.setAttribute( "className", "foo"); // okay

This creates a new attribute.

 

[VK]

Whats going on with setAttribute on IE it appears to work on some examples
and working code but not on other code that I am writting ?

DOM Tree and DOM interfaces are different things - but there is a
greate confusion on this topic. One of benefits of upcoming HTML 5.0
is that it explains it in details and in proper terms - something that
W3C failed to do in 7 years.

<style>
.foo {
font-size: 200%;
}
</style>

var e = document.createElement( "div");
e.setAttribute( "class", "foo"); // fails
e.setAttribute( "className", "foo"); // okay
e.setAttribute( "style", "font-size: xx-large"); // fails
e.setAttribute( "style.fontSize", "xx-large"); //fails
e.setAttribute( "style", "font-size: 24pt;"); //fails
e.style.fontSize = '24pt'; // okay
e.className = 'foo'; // okay
e.appendChild( document.createTextNode( "Text Text Text"));
document.body.appendChild( e);

function init() {
var elm = document.createElement('div');
elm.appendChild(document.createTextNode('Text'));
elm.className = 'foo';
elm.style.backgroundColor = 'yellow;
document.body.appendChild(elm);
}
window.onload = init;