1

以下 JavaScript 代码在基于 WebKit 的浏览器中完美运行，但在 Firefox 中无法运行：

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

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

看来我一定做错了什么，这并不奇怪，因为我无法弄清楚从 JavaScript 访问（读取或设置）CSS 样式属性的正确方法是什么。我刚刚找到了一些使用这种表示法的示例，并尝试遵循它们，结果好坏参半。

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

4

2 回答 2

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";

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

于 2012-06-11T10:12:00.930 回答
0

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

  obj.style.marginLeft = '10px';
于 2012-06-11T10:25:51.713 回答