javascript - 从 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`

这大概是因为:

• DOM 样式属性在从 JavaScript 访问时使用驼峰命名法。

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

---

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

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

或

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

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