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可以轻松修复，但我想正确理解这里发生的事情。

Answer 1

样式属性名称在JavaScript中是驼峰式的，所以：

FB.style.borderColor = "#009900";

DOM 2规范包括list of valid style properties，所有这些都遵循驼峰式命名方案。没有转换就没有引用支持CSS属性名称。较新的规格/草案可能改变了这一点，但我找不到一个好的参考。

链接quoo's answer表示style['border-color']实际上是WebKit和Trident支持的非标准，开发人员友好的备用访问方法，但不支持Gecko或Opera。

Answer 2

而不是像你一样使用样式['border-color']，改变样式的正确方法是使用驼峰案例而不是连字符属性名称。所以正确的语法是

FB.style.borderColor = "#009900";