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

106

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

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

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

javascript properties

— 达蒙
source

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

— Sz。

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

— 达蒙

153

编辑

查看注释，您将看到对于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_$]*

— 奥斯汀
source

1

键符号不适用于此处-CSS

— Brian

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

— Brian

@brian在野生动物园和Chrome中进行了测试，显示红色，红色，中心，中心。我现在尝试ff

— austinbv'Aug

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

— austinbv 2011年

1

删除我的赞成票，因为另一个响应者指出CSS集合恰好是问题的主题，但实际的问题是如何获取带连字符的属性。

— 布莱恩

18

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

alert( style.textAlign );

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

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

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

— 安迪
source

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

— 戴蒙

属性名称不能以数字开头

— 2011年

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

— Camilo Martin

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

— Oriol

17

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

obj['property-with-hyphens'];

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

style.textAlign;

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

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

— 斯通尼
source

2

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

— Stoney

1

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

— 布莱恩

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

— 斯托尼

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

— Oriol

9

使用括号：

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

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

有关对象的更多信息：MDN

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

— 乔
source

1

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

— Brian

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

— Oriol

4

alert(style.textAlign)

要么

alert(style["textAlign"]);

— 布赖恩
source

4

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

— 道森·托斯
source

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

— Oriol

调整为使用骆驼的情况。

— 道森·托斯

3

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

— 乔尼·布坎南
source

3

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

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

— 昆汀
source

2

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

— 道格·张伯伦
source

2

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

— 高登
source

0

一开始，我想知道为什么该解决方案对我没有用

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

...后来发现访问数据属性是不同的：应该是这样的：

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

希望这可以帮助！

— 沃皮
source