Javascript cssText基本使用指北

一、csstext之起步

那些年，我們是這樣設定樣式的：

***.style.width = "233px";
***.style.position = "fixed";
***.style.left = "233px";

現如今，我們可以這樣搞：

***.style.csstext="width:233px;height:233px;position:fixed";

w3c是這樣描述csstext：

csstext，domstring型別 csstext特性必須返回序列化的css規則。當設定csstext特性時執行這些步驟： 1. 解析其值。 2. 如果解析失敗則終止執行。 3. 如果新物件的type並不匹配當前物件的type則丟擲"invalidmodificationerror"異常。

4. 替換當前物件為新物件。

我以為關鍵在於第四條：

替換當前物件為新物件。

是替換，也就是說會覆蓋到目標元素之前本身所具有的全部樣式（繼承的不算）。

舉個栗子：

這裡有乙個，長下面這個模樣：

.***

然後我要改變它的高度，我可以這麼寫：

***.style.height= "466px";

但是客官你不可以這麼寫：

***.style.csstext="height:466px;";

二、csstext之提速

基於上面的原因，我們在使用csstext修改某個元素樣式的時候，需要首先得到它當前的樣式：

var *** = document.getelementbyid("warp");
var ***_style = ***.style.csstext;

然後在加上現在的樣式：

***_style += "position:fixed;"
***.style.csstext = ***_style;

但是，客官如果貴司有下面這種情況，還請留步。

面對這種喪心病狂、男默女淚的情況，我們需要額外注意一點：

當我們使用var ***_style = ***.style.csstext;得到樣式的時候，最後是沒有分號的。

也就是說，如果某個元素的樣式是：height: 100px; width: 100px;overflow: hidden;

在ie6/7/8下我們會得到：height: 100px; width: 100px; overflow: hidden

最後的分號被丟掉了。

結果就是當我們再使用

***_style += "background:#f60;"
***.style.csstext = ***_style;

來處理樣式時，會出現：height: 100px; width: 100px; overflow: hiddenbackground:#f60;

當然你可以選擇使用：***_style = "background:#f60;" + ***_style的方式，最後沒有分號也不會影響，但是世事難料，安全起見，還是額外判斷一下，補上這個分號比較可靠。

除此以外，ie6/7/8下返回的屬性和值全是大寫，為了避免日後出現意外，還是.tolowercase( )比較好。

三、csstext之靠邊停車

大家一路上在前端的道路上馳騁下去吧，就不用靠邊停車了！

馬上就要回家給偉大的祖國母親慶祝生日了，微博上出現了2種不同的聲音：

作業本同學說：

某註明作家（反正我是不認識）說：

作為還在上班（班，小名segmentfault）的人，我就不說什麼了...

大家國慶節快樂！