如何引用其中包含连字符的 JavaScript 对象属性？

Question

我正在使用这个脚本来创建所有继承等样式的样式对象。

var style = css($(this));
alert (style.width);
alert (style.text-align);

通过以下内容，第一个警报将正常工作，但第二个警报不会......我认为它将

-

解释为减号。调试器显示“未捕获的引用错误”。不过，我不能在它周围加上引号，因为它不是字符串。那么我该如何使用这个对象属性呢？

Answer 1

看评论。您将看到，对于 CSS 属性，键符号与许多属性不兼容。因此，使用驼峰式键符号是当前的方法：

obj.style-attr // would become

obj["styleAttr"]

---

使用键符号而不是点

style["text-align"]

JavaScript 中的所有数组都是对象，所有对象都只是关联数组。这意味着您可以引用对象中的某个位置，就像引用数组中的键一样。

arr[0]

或物体

obj["method"] == obj.method

以这种方式访问属性时需要记住以下几点：

1. 它们会被评估，因此请使用字符串，除非您正在使用计数器或使用动态方法名称执行某些操作。

   这意味着 obj[method] 会给你一个未定义的错误，而 obj["method"] 则不会

2. 如果您使用 JavaScript 变量中不允许的字符，则必须使用此表示法。

这个正则表达式几乎概括了它：

[a-zA-Z_$][0-9a-zA-Z_$]*

Answer 2

原问题的答案是：将属性名称放在引号中并使用数组样式索引：

obj['property-with-hyphens'];

一些人指出您感兴趣的属性是 CSS 属性。具有连字符的 CSS 属性会自动转换为驼峰式大小写。在这种情况下，您必须使用驼峰式名称，例如：

style.textAlign;

但是此解决方案仅适用于 CSS 属性。例如，

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2

Answer 3

带有

-

 的 

CSS 属性在 JavaScript 对象中以驼峰命名法表示。那将是：

alert( style.textAlign );

您还可以使用括号表示法来使用字符串：

alert( style['text-align'] );

属性名称只能包含字符、数字、众所周知的

$

符号和

_

（感谢 pimvdb）。

Answer 4

使用括号：

var notTheFlippingStyleObject = {
    'a-b': 1
};

console.log(notTheFlippingStyleObject["a-b"] === 1); // true

有关对象的更多信息：MDN

注意：如果您要访问 style 对象、CSSStyleDeclaration，则必须使用驼峰命名法从 JavaScript 中访问它。更多信息请参见这里。

Answer 5

alert(style.textAlign)

或

alert(style["textAlign"]);

Answer 6

直接回答问题：

style['text-align']

是引用带有连字符的属性的方式。但在这种情况下应该使用

style.textAlign

（或

style['textAlign']

）。

Answer 7

连字符样式属性通过 JavaScript 中的驼峰命名法引用，因此请使用

style.textAlign

。

Answer 8

解决您的问题：带有连字符的 CSS 属性由 JavaScript 属性以驼峰命名法表示，以避免此问题。你想要：

style.textAlign

.

回答问题：使用方括号表示法：

obj.prop

与

obj["prop"]

相同，因此您可以使用字符串访问属性名称并使用标识符中禁止的字符。

Answer 9

我认为对于 CSS 样式，它们会在 JavaScript 中更改为驼峰式命名法，因此

test-align

变为

textAlign

。

在一般情况下，如果要访问包含非标准字符的属性，可以使用数组样式：

['text-align']

Answer 10

对象属性名称与 CSS 名称不是一对一匹配。

Answer 11

起初，我想知道为什么该解决方案对我不起作用：

api['data-sitekey'] // Returns undefined

...后来我发现访问数据属性是不同的：

应该是这样的：

var api = document.getElementById("some-api");
api.dataset.sitekey

Answer 12

如果有人想要修改 element.style 的某些属性，有时需要适当的单位，例如 px、rem、%

例如，而不是这个

element.style.marginBottom = 12;

试试这个

element.style.marginBottom = '12px';