从JavaScript访问元素的CSS样式属性的正确方法是什么？

Question

以下JavaScript代码在基于WebKit的浏览器中运行良好，但在Firefox中不起作用：

canvas.style['left'] = "50%";
canvas.style['margin-left'] = "-" + (width / 2) + "px";

检查Firefox中的元素，我可以看到上面的代码成功设置了left属性，但由于某种原因，该元素没有margin-left属性。

似乎我一定做错了，这并不奇怪，因为我无法弄清楚从JavaScript访问（读取或设置）CSS样式属性的正确方法是什么。我刚刚发现了一些使用这种表示法的例子，并尝试按照这些结果混合使用。

从JavaScript访问元素的CSS样式属性的正确/符合标准的方法是什么？

Answer 1

经过多次拉扯之后，我发现了以下基本事实，这些事实对于大多数JavaScript人来说肯定是不费吹灰之力的，但我想我的混淆并不少见于JavaScript之类的新事物。

• JavaScript中的所有对象都是关联数组。

可以通过以下两种方式访问​​对象属性：

var o = new Object();
o.prop = "A string";
o['prop']; // => "A string"

虽然可以将对象用作“普通”关联数组并使用具有任意字符串的键：

o.['another-prop'] = 4 // Perfectly valid

这样做，您将创建一个无法通过点表示法访问的属性：

o.another-prop // Parsed as `o.another` minus `prop`

这可能是以下原因：

• 从JavaScript访问时，DOM样式本地使用camelCase。

我使用的是CSS中使用的带连字符的属性名称。这些在我测试的所有基于WebKit的浏览器中都有效，但似乎只是因为WebKit是宽容的。

---

据我所知，从JavaScript访问CSS样式属性的正确方法是将属性名称转换为驼峰大小写，然后使用点表示法或括号内的关联数组表示法。在Firefox中无效的行变为

canvas.style['marginLeft'] = "-" + (width / 2) + "px";

或

canvas.style.marginLeft = "-" + (width / 2) + "px";

在我测试的所有浏览器中，这对我有用，但如果我说过的内容不正确或与标准一致，我很乐意听到。

Answer 2

删除短划线和下一个带大写字母的单词， margin-left to marginLeft等

  obj.style.marginLeft = '10px';