javascript - CSS 属性的跨浏览器动态设置

Question

我有一个函数可以获取许多数据并为定义的元素设置 CSS 属性。

代码如下:

function setStyle(element,property,target){
     element.style[property] = target;
}

var EL = document.getElementById("id");
setStyle(EL,"width","50px");

它适用于大多数浏览器，但不适用于 IE6–IE9。

我找到了 document.defaultView.getComputedStyle 和 element.currentStyle[type]，但是这些方法获取样式，我不能用它们来设置。

有什么办法可以为旧的 IE 做到这一点吗？

我不想使用 jQuery 或任何其他 JS 库，谢谢。

Answer 1

默认方式是 element.style.property = "value"，例如:

document.getElementById("id").style.width = "50px";

没有理由不工作。但是，作为替代方案，可以考虑在类中设置 css 样式，并通过 className 属性将其添加到元素中。它得到广泛支持:

CSS:

.myClass { width: 50px; }

js:

document.getElementById("id").className = "myClass";

编辑

另一种方法，在 IE8+ 中工作(如果你真的不需要任何更低的东西)将实际的 style 属性设置为 DOM 元素，这样你就可以将属性作为参数:

http://jsfiddle.net/ppf5qcvo/

function setStyle(element,property,target){
    element.setAttribute("style", property + ":" + target);
}
var el = document.getElementById("test");
setStyle(el, "color", "red");