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以外的样式。