JavaScript操作CSS float属性的跨浏览器兼容写法

JavaScript操作CSS float属性的跨浏览器兼容写法

在IE浏览器环境中，控制浮动属性需使用styleFloat。

在其他非IE浏览器中，则应使用cssFloat。

本文简要解析JavaScript操作CSS float属性的特殊实现方式。对于带有连字符的CSS属性名，常规处理规则是移除所有连字符，并将紧随其后的首字母转换为大写。

JavaScript中style float属性的操作示例。

通过JavaScript操作CSS属性遵循特定的命名规律：

1、若CSS属性名不含连字符，可直接通过style对象调用属性名。

例如：obj.style.margin、obj.style.width、obj.style.left、obj.style.position等。

2、若CSS属性名包含连字符，需去除连字符并将每个连字符后的第一个字母大写。

例如：obj.style.marginTop、obj.style.borderLeftWidth、obj.style.zIndex、obj.style.fontFamily等。

上述规律为前端开发者所熟知，但CSS中存在一个特例，其JavaScript操作方式较为特殊，即float属性。直接通过obj.style.float进行赋值无效。

正确的IE浏览器兼容写法为：

其他标准浏览器的写法为：