setAttribute is not working for 'style' attribute on IE

Question

I'm porting a piece of JS code written for Firefox into Internet Explorer. I faced a problem of changing style of an element using setAttribute method which was working on Firefox.

button.setAttribute('style', 'float: right;');

I tried setting the style member of button and it didn't work either. This was the solution in case of setting onclick event handler.

button.style = 'float: right;';

First I wanna know the solution for the above problem and
Second are there any maintained lists for these differences between browsers ?

Answer 1

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

button.style.setAttribute('cssFloat','right');

But IE doesn't support setAttribute for style objects. So use the fully cross-browser supported:

button.style.cssFloat = 'right';

As for reference, I always go to www.quirksmode.org . Specifically: http://www.quirksmode.org/compatibility.html . Click on all the DOM related stuff.

And finally, to set multiple attributes I usually use something like:

function setStyle(el,spec) {
    for (var n in spec) {
        el.style[n] = spec[n];
    }
}

usage:

setStyle(button,{
    cssFloat : 'right',
    border : '2px solid black'
});

Note: object.attribute = 'value' although works in all browsers may not always work for non-HTML DOM objects. For example, if your document contains embedded SVG graphics that you need to manipulate with javascript you need to use setAttribute to do it.

Answer 2

你需要使用 cssText

 button.style.cssText = 'float: right;';

Answer 3

getAttribute and setAttribute are broken in Internet Explorer.

The correct syntax for what you are trying to achieve is:

button.style.cssFloat = 'right';

The correct solution to the problem is more likely to be:

button.className = 'a class that matches a pre-written CSS rule-set';

Answer 4

I noticed that setAttribute works in IE only when the attribute does not already exist. Therefore, use remove attribute and then use set attribute.

Haven't tested this for bugs, but conceptually I think this will work:

NOTE - this was written to exist inside object that had property called 'element'.

//Set Property

this.setProperty = function (a, b) {
var c = this.element.getAttribute("style");
var d;
if (!c) {
    this.element.setAttribute("style", a + ":" + b);
return;
} else {
    d = c.split(";")
}

for (var e = 0; e < d.length; e++) {
    var f = d[e].split(":");
    if (f[0].toLowerCase().replace(/^\s+|\s+$/g, "").indexOf(a.toLowerCase().replace(/^\s+|\s+$/g, "")) == 0) {
       d[e] = a + ":" + b
    }
}

d[d.length] = a + ":" + b;
this.element.setAttribute("style", d.join(";"))
}

//Remove Property
this.removeProperty = function (a) {
var b = this.element.getAttribute("style");
var c;
if (!b) {
    return
} else {
    c = b.split(";")
}

for (var d = 0; d < c.length; d++) {
    var e = c[d].split(":");
    if (e[0].toLowerCase().replace(/^\s+|\s+$/g, "").indexOf(a.toLowerCase().replace(/^\s+|\s+$/g, "")) == 0) {
        c[d] = ""
    }
}

this.element.removeAttribute("style");
this.element.setAttribute("style", c.join(";").replace(";;", ";"))
}

Answer 5

It does work in IE. Just tried it out.

1. The method is passed a style name and a value
2. The method then checks to see if there are any styles If no styles attribute exists, then the method simply sets the style and stops
3. If a style attribute exists, all the styles in the attribute are split into an array
4. The array is iterated and all applicable style definitions are updated with the new value
5. The style attribute is then removed from the element
6. The style attribute is added back to the element with its values set to the new info gathered from the array

Answer 6

Another useful way to mutate a style property is using the square brackets to access the property. This is useful for accessing properties which because of their name would give a syntax error if expressed normally. In JavaScript it is perfectly permissible to have properties with numeric values, numeric first letters and symbols and spaces as characters, but then you must use the square bracket way of accessing properties.

node.style.z-index = 50;//Firefox says error, invalid assignment left hand side.

node.style["z-index"] = "50";//Works without error