从 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

删除破折号和下一个带有大写字母的单词， margin-left 到 marginLeft 等

  obj.style.marginLeft = '10px';

Answer 2

经过一番摸索后，我发现了以下基本事实，这些事实对于大多数 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";

这适用于我测试过的所有浏览器，但如果我所说的内容不正确或不符合标准，我很乐意听到。