JavaScript 學習筆記——cssText

平常編寫代碼，更改一個元素樣式的時候，自己都是用

obj.style.width = "200px";
obj.style.position = "absolute";
obj.style.left = "100px";

 

之類的代碼進行設置，這樣的話如果更改樣式很多的時候，就要寫很多代碼，難道不能像Jquery那樣使用$(obj).css(……);這樣進行設置么？

於是自己搜了下使用Javascript批量修改樣式的方法。於是看到這篇文章，原來是有一個 cssText 屬性的，看來自己的基礎知識掌握的還並不充分吶

在w3school中查詢了下用法

它是一組樣式屬性及其值的文本表示。這個文本格式化為一個 CSS 樣式表，去掉了包圍屬性和值的元素選擇器的花括號。

將這一屬性設置為非法的值將會拋出一個代碼為 SYNTAX_ERR 的 DOMException 異常。當 CSS2Properties 對象是只讀的時候，試圖設置這一屬性將會拋出一個代碼為 NO_MODIFICATION_ALLOWED_ERR 的DOMException 異常。

cssText 的使用　　　　

obj.cssText = " width:200px;position:absolute;left:100px;";

正如那篇文章所提cssText會清除之前元素含有的樣式，所以得使用

obj.cssText += " width:200px;position:absolute;left:100px;";

但是在IE中的最后一個分號會被刪除

obj.cssText += " ;width:200px;position:absolute;left:100px;";　//這樣便能解決在IE中出現的問題了

 可這樣代碼也顯得有些麻煩（起碼在我自己看來），於是又找了找其他方法

//使用JSON
function setStyle(obj,json){
    for(var i in json)
    {
        obj.style[i]=json[i];
    }
}

使用的時候直接

setStyle(obj,{width : '200px'; position : 'absolute'; left : '100px';});

自我感覺這樣方法倒是挺不錯

 非原創，只是怕自己看到的東西忘記了，存在這里，隨時查看 ：），筆記嘛，哈哈

原文：http://rguanghui.sinaapp.com/2013/02/26/javascript_study_note_csstext/