javascript - 在 Chrome 和 FF 之间动态且一致地设置样式属性

Question

<div id='box' class='frustratingBox'></div>

.frustratingBox{
    border:5px solid;
    border-color: #000000;
    border-radius:25px;
    width:100px;
    height:100px;
}

关键是尝试更改 JS 中的单个样式属性：

var FB = document.getElementById('box');
FB.style['border-color'] = "#009900";

问题：我的盒子最终是绿色的，就像我在 Chrome 中所期望的那样，但根据 FF 中的样式表规则仍然是黑色的。是什么导致了这种差异，这些浏览器在样式对象上到底有什么不同？使用 Zepto 可以轻松解决问题，但我想正确理解这里发生的事情。

score 3 · Accepted Answer

样式属性名称在 JavaScript 中是驼峰式大小写的，因此：

FB.style.borderColor = "#009900";

DOM 2 规范包括一个有效样式属性列表，所有这些都遵循驼峰命名方案。没有参考支持不进行转换的 CSS 属性名称。较新的规范/草案可能已经改变了这一点，但我找不到一个好的参考。

现状的答案提供的链接表明这 style['border-color']实际上是 WebKit 和 Trident 支持的非标准、对开发人员友好的替代访问方法，但 Gecko 或 Opera 不支持。

score 2 · Accepted Answer

而不是像您一样使用 style['border-color'] ，更改样式的正确方法是使用驼峰式大小写而不是连字符属性名称。所以正确的语法是

FB.style.borderColor = "#009900";

2 回答 2