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

Posted 2023-03-14

【中文标题】如何引用带有连字符的 JavaScript 对象属性？

【英文标题】：How do I reference a JavaScript object property with a hyphen in it?

【发布时间】：2019-03-01 19:56:52

【问题描述】：

我正在使用this script 来制作一个包含所有继承样式等样式的样式对象。

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

使用以下内容，第一个警报将正常工作，但第二个警报不会...它将- 解释为我假设的减号。调试器说“未捕获的引用错误”。不过，我不能在它周围加上引号，因为它不是字符串。那么如何使用这个对象属性呢？

【问题讨论】：

Damon，解决歧义和混乱问题（也反映在不同的答案和根据解释添加/删除的反对票...）：您是否特别指的是 CSS 属性，正如您的示例所暗示的那样并假设大多数答案，或任何 JS 属性，一般来说，如标题所示，缺少CSS 标签？ [是的，我知道已经 7 年了。 :) ]

@Sz。我的意思是any js property，因为我在引用一个带有连字符的属性时遇到了问题（这也恰好是一个css属性......我没有意识到我试图做的还有另一个问题）。所以这是一个奇怪的问题，最终涵盖了 2 个不同的问题。但我会说最佳答案解释了这两个问题。

我在这个问题中没有看到任何特定于 jQuery 的内容。对我来说，这是一个 pure javascript 问题。 @jAndy，请原谅我在这里提到你，但如果你有时间和意愿，你介意帮助解决这个问题是 关于 JavaScript 还是 关于 jQuery? （这个问题肯定包含 jQuery。我想我们都可以同意。）

这篇文章在 Meta 上是 being discussed。

另见：Unable to access object property with “-” dash

【参考方案1】：

使用括号：

var notTheFlippingStyleObject = 
    'a-b': 1
;

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

关于对象的更多信息：MDN

注意：如果您正在访问 style 对象 CSSStyleDeclaration，则必须使用 camelCase 从 JavaScript 访问它。更多信息是here。

【讨论】：

你不是在取悦我——你是在取悦 w3c 标准，对于这个问题的许多其他回复者来说：w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties，但同样赞成......

不要使用此代码。 这并不是说驼峰式 CSS 属性更适合跨浏览器，而是使用连字符而不是驼峰式大小写是不标准的，不应该工作。

【参考方案2】：

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

obj.style-attr // would become

obj["styleAttr"]

---

使用关键符号而不是点

style["text-align"]

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

arr[0]

或对象

obj["method"] == obj.method

以这种方式访问​​属性时要记住几件事：

它们被评估所以使用字符串，除非你正在使用计数器或使用动态方法名称。

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

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

这个正则表达式几乎总结了它：

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

【讨论】：

键符号在这里不适用 - css 在键中使用驼峰大小写定义样式：jsfiddle.net/49vkD

什么浏览器？在 IE7、IE8、FFX 3.5 中的连字符对我来说失败了。而且，失败是指为这两个显示“未定义”......

@brian 在 safari 和 chrome 中测试，显示红色、红色、中心、中心。我现在在ff里试试

@brian 很有趣，没在 firefox6 中工作过，我不知道...每天学习新东西

删除了我的反对意见，因为另一位响应者指出 CSS 集合恰好是 hte 问题的主题，但实际问题是如何获得连字符属性。

【参考方案3】：

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

【讨论】：

不要使用这个。 CSS 属性是驼峰式的。您的代码可能适用于某些浏览器，但不是标准的。

调整为骆驼皮套。

【参考方案4】：

带有- 的CSS 属性在JavaScript 对象中以camelCase 表示。那将是：

alert( style.textAlign );

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

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

属性名称只能包含字符、数字、众所周知的$ 符号和_（感谢 pimvdb）。

【讨论】：

后者有效.. 我刚刚错过的那些语法内容之一。我引用的脚本使用了常规的 css 样式名称，但仍然很有用！

属性名称不能以数字开头

属性名称可以包含大量的 Unicode 字符。规范没问题，浏览器也没问题。例如：var ò_ó = 'angry';

不要使用第二个代码。 CSS 属性是驼峰式的。您的代码可能适用于某些浏览器，但不是标准的。

【参考方案5】：

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

【参考方案6】：

连字符样式属性为referenced via camelCase in JavaScript，因此请使用style.textAlign。

【参考方案7】：

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

obj['property-with-hyphens'];

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

style.textAlign;

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

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

【讨论】：

@Brian 您对 CSS 属性是正确的。但是，我回答了最初的一般问题“如何引用带有连字符的 javascript 对象属性？”这是您的 jsfiddle 的更新版本：jsfiddle.net/49vkD/1

确实，我自己缩小了答案的范围——我认为 OP 专门指的是样式对象。删除了我的反对票，因为这个问题比这更开放。

我认为你是对的。这大概就是达蒙想要的。我也从字面上看。

您必须使用驼峰式名称。不是可以。

【参考方案8】：

解决您的问题：带有连字符的 CSS 属性为 represented by JavaScript properties in camelCase 以避免此问题。你想要：style.textAlign。

回答问题：使用square bracket notation：obj.prop 与obj["prop"] 相同，因此您可以使用字符串访问属性名称并使用标识符中禁止使用的字符。

【参考方案9】：

alert(style.textAlign)

或

alert(style["textAlign"]);

【参考方案10】：

我认为在 CSS 样式的情况下，它们会在 JavaScript 中更改为 camelCase，因此 test-align 变为 textAlign。

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

【参考方案11】：

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

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

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

应该是这样的：

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