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