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");

Answer 2

你考虑过使用 jQuery 吗？它为您处理所有跨浏览器问题。您可以使用以下语句完成相同的操作：

$('#id').width('50px');