如何引用带连字符的 JavaScript 对象属性？

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

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

接下来，第一个警报可以正常工作，但是第二个不行... ... 我猜它把 -解释为负值。调试器说“未捕获的引用错误”。但是我不能在它周围加引号，因为它不是字符串。那么如何使用这个 object 属性呢？

131867 次浏览
小开

使用括号:

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


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

关于对象的更多信息: MDN

注意: 如果要访问 风格对象 CSSStyleDeclaration，则必须使用 camelCase 从 JavaScript 访问它。更多信息是 给你。

小开
最佳答案

看看评论。您将看到，对于 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_$]*
小开

直接回答这个问题: style['text-align']是如何引用带连字符的属性。但是在这种情况下应该使用 style.textAlign(或 style['textAlign'])。

小开

具有 -的 CSS 属性在 JavaScript 对象的 camelCase 中表示，这将是:

alert( style.textAlign );

您还可以使用括号符号来使用字符串:

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

属性名可能只包含字符、数字、众所周知的 $符号和 _(多亏了 pinvdb)。

小开

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

小开

连字符样式属性是 在 JavaScript 中通过 camelCase 引用，因此使用 style.textAlign。

小开

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

obj['property-with-hyphens'];

有几个人指出，您感兴趣的属性是一个 CSS 属性。带有连字符的 CSS 属性将自动转换为驼峰大小写。在这种情况下，必须使用骆驼大小写的名称，如:

style.textAlign;

但是，此解决方案只适用于 CSS 属性,

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

为了解决您的问题 : 带有连字符的 CSS 属性是 由 camelCase 中的 JavaScript 属性表示，以避免这个问题。

要回答问题 : 使用 方括号表示法方括号表示法: obj.prop与 obj["prop"]相同，因此可以使用字符串访问属性名，并使用标识符中禁用的字符。

小开 
alert(style.textAlign)

或者

alert(style["textAlign"]);
小开

我认为在 CSS 样式的情况下，它们在 JavaScript 中被改为 camelCase，所以 test-align变成了 textAlign。

在一般情况下，如果要访问包含非标准字符的属性，可以使用数组样式: ['text-align']

小开

起初，我想知道为什么这个解决方案在我这边不起作用:

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

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

应该是这样的:

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

提交答案