[Javascript]cssText基本使用指北

1、cssText之起步

那些年，咱們是這樣設置樣式的：

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

現現在，咱們能夠這樣搞：

xxx.style.cssText="width:233px;height:233px;position:fixed";

W3C是這樣描述cssText：

cssText，DOMString類型
cssText特性必須返回序列化的CSS規則。
當設置cssText特性時運行這些步驟：
 1. 解析其值。
 2. 若是解析失敗則終止運行。
 3. 若是新對象的type並不匹配當前對象的type則拋出"InvalidModificationError"異常。
 4. 替換當前對象爲新對象。

我覺得關鍵在於第四條：

替換當前對象爲新對象。

是替換，也就是說會覆蓋到目標元素以前自己所具備的所有樣式（繼承的不算）。

舉個栗子：

這裏有一個<div>，長下面這個模樣：

.xxx {height:233px;width:233px;background:#F60;}

而後我要改變它的高度，我能夠這麼寫：

xxx.style.height= "466px";

可是客官你不能夠這麼寫：

xxx.style.cssText="height:466px;";

2、cssText之提速

基於上面的緣由，咱們在使用cssText修改某個元素樣式的時候，須要首先獲得它當前的樣式：

var xxx = document.getElementById("warp");
var xxx_style = xxx.style.cssText;

而後在加上如今的樣式：

xxx_style += "position:fixed;"
xxx.style.cssText = xxx_style;

可是，客官若是貴司有下面這種狀況，還請留步。

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

當咱們使用var xxx_style = xxx.style.cssText;獲得樣式的時候，最後是沒有分號的。

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

在IE6/7/8下咱們會獲得：HEIGHT: 100PX; WIDTH: 100PX; OVERFLOW: HIDDEN

最後的分號被丟掉了。

結果就是當咱們再使用

xxx_style += "background:#F60;"
xxx.style.cssText = xxx_style;

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

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

除此之外，IE6/7/8下返回的屬性和值全是大寫，爲了不往後出現意外，仍是.toLowerCase( )比較好。

3、cssText之靠邊停車

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

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

做業本同窗說：

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

做爲還在上班（班，小名SegmentFault）的人，我就不說什麼了...

你們國慶節快樂！