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屬性的跨瀏覽器動態設置

回答

相關問題