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

使用此脚本制作所有继承的etc样式的样式对象。

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

使用以下命令，第一个警报会正常运行，但是第二个警报不会..它将-解释为我认为的负号。.调试器说“未捕获的参考错误”。但是，我不能在其周围加上引号，因为它不是字符串。那么如何使用此对象属性？

达蒙（Damon），解决了模棱两可和混乱的情况（也由不同的答案以及根据解释而添加/删除的下降投票所反映...）：您是专门指CSS属性（如示例所示）还是由大多数答案假定的，或所有JS属性，一般来说，如标题所示并缺少CSS标记？ [是的，我知道已经7年了。 :)]

@Sz。我指的是任何js属性，因为我在引用带有连字符的属性时遇到了问题（这也恰好是css属性...我没有意识到我尝试执行的操作还有另一个问题）。因此，这很奇怪，最终涉及2个不同的问题。但我想说，最重要的答案可以解释这两个问题。

#1 楼

编辑
，查看注释，您将看到css属性的键符号与许多属性不兼容。因此，目前使用驼峰式大小写键表示法是

obj.style-attr // would become 

obj["styleAttr"]

使用键表示法而不是点

style["text-align"]

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

arr[0]

或对象

obj["method"] == obj.method

有两点要记住以这种方式访问属性时的情况

它们会被评估，因此除非您正在使用计数器或使用动态方法名称进行操作，否则请使用字符串。
这意味着obj [method]将给您一个不确定的错误
，而obj [“ method”]不会

如果您使用的是js变量中不允许的字符，则必须使用此符号。 />

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

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

键符号不适用于此处-CSS使用键中的驼峰式大小写定义样式：jsfiddle.net/49vkD

–布赖恩
2011年8月19日下午14:27

什么浏览器？对我而言，连字符无法在IE7，IE8，FFX 3.5中使用。而且，通过失败，我的意思是为这两个都显示“未定义”。

–布赖恩
2011年8月19日14:34

在Safari和chrome中测试的@brian显示红色，红色，中心，中心。我现在尝试

–austinbv
2011年8月19日14:36

@brian有趣，在firefox6中不起作用，我不知道...每天学习新知识

–austinbv
2011年8月19日在14:42

删除了我的意见书，因为另一位响应者指出CSS集合碰巧是hte问题的主题，但实际的问题是如何获取带连字符的属性。

–布赖恩
2011年8月19日下午14:51

#2 楼

带有-的CSS属性在Javascript对象的camelCase中表示。那应该是：

alert( style.textAlign );

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

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

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

后者有效..我只是错过了一些语法上的东西。我引用的脚本使用常规的CSS样式名称，但了解它仍然很有用！

–达蒙
2011年8月19日下午14:12

属性名称不能以数字开头

–austinbv
2011年8月19日下午14:39

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

–卡米洛·马丁（Camilo Martin）
2012年9月21日上午11:24

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

– Oriol
16年7月30日在1:58

#3 楼

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

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

–坚硬
2011年8月19日下午14:48

实际上，我自己缩小了答案的范围-我认为OP的意思是专门设置样式对象。删除我的不赞成票，因为这个问题比这更开放。

–布赖恩
2011年8月19日下午14:50

我认为你是对的。那可能是达蒙想要的。我从字面上也读过它。

–坚硬
2011年8月19日在15:05

您必须使用驼峰式的名称。不行

– Oriol
16年7月30日在1:58

#4 楼

使用方括号：

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

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

有关对象的更多信息：MDN

注意：如果要访问样式对象CSSStyleDeclaration，则必须使用camelCase来从javascript访问它。更多信息在这里

对于这个问题，无数其他响应者都对您不满意，对w3c标准却不满意：w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties，但都赞成。 ..

–布赖恩
2011年8月19日14:41

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

– Oriol
16年7月30日在2:03

#5 楼

alert(style.textAlign)

或

alert(style["textAlign"]);

#6 楼

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

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

– Oriol
16 Jul 30'1:56

调整为使用骆驼的情况。

–道森·托特（Dawson Toth）
16年8月1日在20:45

#7 楼

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

#8 楼

解决问题的方法：带有连字符的CSS属性由camelCase中的JavaScript属性表示，以避免出现此问题。您需要：style.textAlign。

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

#9 楼

我认为在CSS样式的情况下，它们在Javascript中已更改为camelCase，因此test-align变为textAlign。在通常情况下，如果要访问包含非标准字符的属性，请使用数组样式。 ['text-align']

#10 楼

对象属性名称与css名称不是一一对应的。

#11 楼

首先，我想知道为什么该解决方案对我而言不起作用

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

...后来弄清楚访问数据属性是不同的：
应该是这样的：

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

希望有帮助！

编程黑洞网