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

我有一个函数可以获取许多数据并为定义的元素设置一个CSS属性。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库，谢谢。

来源

2014-08-27 mk rowling

我发现http://youmightnotneedjquery.com/是这些情况下的有用参考。 – jtheletter 2014-08-27 21:34:07

你有没有考虑过使用jQuery？它为您处理所有跨浏览器问题。你可以做到相同的事情用以下语句：

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

来源

2014-08-27 21:22:17 Jay

'$（'＃id'）.css（'width'，'50px'）'确切地说。 – 2014-08-27 21:24:36

抱歉！我忘记说我不想使用jQuery或任何其他js库（编辑过） – 2014-08-27 21:24:39

另外，如果您想使用jQuery设置其他样式，请参阅此处（http：// api。 jquery.com/category/manipulation/style-properties/）。 – Jay 2014-08-27 21:27:09

默认方式是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");

来源

2014-08-27 21:29:45 LcSalazar

我在函数中使用它，我要定义属性，它应该在函数参数中进行更改，所以我不能使用'element.style.property =“value”' – 2014-08-27 21:41:51

**进行编辑* *谢谢，但我真的需要在IE6上支持它 – 2014-08-27 22:02:38

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

回答

相关问题