setAttribute不适用于IE上的'style'属性

Question

我正在将一段为Firefox编写的JS代码移植到Internet Explorer中.我遇到了使用setAttribute在Firefox上工作的方法更改元素样式的问题.

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

我尝试设置按钮的样式成员,它也不起作用.这是设置onclick事件处理程序的解决方案.

button.style = 'float: right;';

首先,我想知道上述问题的解决方案,
其次是浏览器之间存在这些差异的维护列表吗？

Answer 1

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

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

但IE不支持样式对象的setAttribute.所以使用完全跨浏览器支持:

button.style.cssFloat = 'right';

至于参考,我总是去www.quirksmode.org.具体来说:http://www.quirksmode.org/compatibility.html.点击所有DOM相关的东西.

最后,要设置多个属性,我通常会使用以下内容:

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

用法:

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

注意:object.attribute = 'value'虽然在所有浏览器中都有效但可能并不总是适用于非HTML DOM对象.例如,如果您的文档包含需要使用javascript操作的嵌入式SVG图形,则需要使用setAttribute它来执行此操作.

Answer 2

你需要使用cssText

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

Answer 3

getAttribute并setAttribute在Internet Explorer中被破坏.

您要实现的目标的正确语法是:

button.style.cssFloat = 'right';

解决问题的正确方法更可能是:

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