JS批量设置元素样式的跨浏览器兼容写法

JS批量设置元素样式的跨浏览器兼容写法

在JavaScript中为元素批量添加多项样式，以下提供一段全浏览器兼容的示例代码：

<a href="javascript:;" id="test" style="font-size:25px;background:#080;">测试3</a>
<script>
var obj=document.getElementById("test");
var oldStyle=obj.style.cssText;
alert(oldStyle);
obj.style.cssText="border:2px red solid;color:#f00;"+oldStyle;
</script>

使用cssText属性是添加多项样式最快捷的方式，但该操作会覆盖元素原有的style属性值。若需保留原有样式，只需将原始cssText值存入变量，再与新样式字符串进行拼接即可实现。

需要特别注意IE8及更低版本浏览器的行为：这些浏览器中obj.style.cssText返回的最后一个样式值末尾不包含分号，例如显示为font-size:25px;background:#080。

因此，在示例代码中特意将oldStyle变量置于字符串拼接的末尾。这样即使IE8返回的最后一个样式值缺少分号，拼接后的完整字符串也能正确解析，确保各浏览器样式显示一致。这是一个虽小但容易忽略的兼容技巧。