Javascript中CSS屬性float的特殊寫法

Javascript中CSS屬性float的特殊寫法

今天在用YUI壓縮JS的時候出現了報錯，檢查了一下，發現是由於代碼中有這樣的語句「style.float」。開始不是很明白爲何這樣會報錯，在查

閱大量資料並進行多個瀏覽器的測試後才明白了其中的起因。

要點梳理：

1. float是Javascript中的保留字，所以使用style.float是無效的（在Chrome和IE9中正常，而在FF和IE6~8中均無效）。

2. 在FF、Chrome、IE9中，style.float是用style.cssFloat代替的（之因此說「代替」，是由於除float屬性以外，其他屬性的書寫都符合一樣的規

則：只含單個單詞的屬性保持原樣，包含中劃線的屬性將中劃線去掉並將中劃線後的第一個字母大寫）。

3. 在IE中（IE6~IE9），style.float是用style.styleFloat代替的。

解決方案一：

var o = document.getElementById("tmp");

o.style.cssText = "float:left";

這種方案的缺點是牽一髮而動全身，由於這個賦值分兩部分完成：第一步清除style.cssText中原有的所有內容（其中可能包括大量的其餘樣

式），第二步將"float:left"賦值給它。也就是「覆蓋」的意思。

解決方案二：

var o = document.getElementById("tmp");

o.style.cssFloat = o.style.styleFloat = "left";

這種方案是推薦方案，由於它兼容全部瀏覽器（FF&Chrome&IE6~9），而且不會影響float以外的樣式。