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

我正在使用创建所有继承样式等样式的样式对象

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

在以下情况下，第一个警报将正常工作，但第二个警报不正常。。。它将

-

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

使用括号：

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

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

有关对象的详细信息：

---

注意：如果要访问对象，必须使用camelCase从JavaScript访问它。更多信息请参见。

查看评论。您将看到，对于CSS属性，键表示法与许多属性不兼容。因此，当前的方式是使用camel case键表示法：

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_$]*

---

直接回答以下问题：

style['text-align']

是如何引用带有连字符的属性。但是

style.textAlign

（或

style['textAlign']

）是这种情况下应该使用的。带有

-

的CSS属性在JavaScript对象中以camelCase形式表示。这将是：

alert( style.textAlign );

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

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

---

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

$

符号和

（多亏了pimvdb）。

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

连字符样式属性是，因此，请使用

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属性可避免此问题。您需要：

style.textAlign

回答问题：使用：

obj.prop

与

obj[“prop”]

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

alert(style.textAlign)

或

---

我认为在CSS样式的情况下，它们会在JavaScript中更改为camelCase，因此

testalign

变成

textalalign

---

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

['text-align']

，首先，我想知道为什么解决方案在我这方面不起作用：

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

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

应该是这样的:

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

---

后者有效。。我刚刚错过的一件联合体的事情。我引用的脚本使用常规css样式名称，但仍然很有用！属性名称不能以数字开头，因为属性名称可能包含大量Unicode字符。规范和浏览器都可以。例如：

varòuó=‘愤怒’不要使用第二个代码。CSS属性是驼峰式的。您的代码可能在某些浏览器上工作，但不是标准的。此处不适用键符号-css在键中使用驼峰大小写定义样式：什么浏览器？在IE7，IE8，FFX3.5中的连字符对我来说失败了。布莱恩在safari和chrome中测试显示红色、红色、中间、中间。我将在ff试一试now@brian有趣的是，我没有在firefox6中工作，我不知道。。。每天学习新内容删除了我的否决票，因为另一位回复者指出CSS集合恰好是这个问题的主题，但实际的问题是如何获得连字号属性。你不是在安抚我-你是在安抚w3c标准，根据这个问题的众多其他回复者：，但同样的，不要使用这个代码。这并不是因为驼峰式CSS属性更适合跨浏览器，而是使用连字符而不是驼峰式CSS属性是不标准的，不应该起作用。第一个和最后一个链接都断了（“找不到页面”）。哦，伙计。修复所有这些都需要一段时间。我希望我能找到一些东西来自动化这个过程。@Brian您对CSS属性的理解是正确的。然而，我回答了最初的一般性问题“如何引用带有连字符的javascript对象属性？”这里是JSFIDLE的更新版本：事实上，我自己缩小了答案的范围——我假设OP是指特定样式的对象。删除了我的反对票，因为这个问题比这个问题更具开放性。我认为你是对的。这可能就是达蒙想要的。我读得太逐字逐句了。你必须用骆驼壳的名字。不能。不要用这个。CSS属性是驼峰式的。您的代码可能在某些浏览器上工作，但不是标准的。调整为使用驼峰大小写。Damon，解决歧义和混淆（也反映在不同的答案和根据解释添加/删除的否决票中…）：您是否特别指CSS属性，正如您的示例所暗示的和大多数答案所假设的那样，或者任何JS属性，一般来说，如标题和
var api = document.getElementById("some-api");
api.dataset.sitekey