如何引用带有连字符的 javascript 对象属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7122609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I reference a javascript object property with a hyphen in it?
提问by Damon
Using this scriptto make a style object of all the inherited etc styles.
使用此脚本创建所有继承等样式的样式对象。
var style = css($(this));
alert (style.width);
alert (style.text-align);
with the following, the first alert will work fine, but the second one doesn't.. it's interpreting the -as a minus I assume.. the debugger says 'uncaught reference error'. I can't put quotes around it, though, because it isn't a string. So how do I use this object property?
使用以下内容，第一个警报将正常工作，但第二个警报不起作用..它将解释-为我假设的减号..调试器说“未捕获的引用错误”。但是，我不能在它周围加上引号，因为它不是字符串。那么如何使用这个对象属性呢？
回答by austinbv
EDIT
编辑
Look at the comments you will see that for css properties key notation is not compatible with a number of properties. Using the camel case key notation therefore is the current way
查看注释，您会发现 css 属性的键符号与许多属性不兼容。因此，使用驼峰式键符号是当前的方式
obj.style-attr // would become
obj["styleAttr"]
Use key notation rather than dot
使用键符号而不是点
style["text-align"]
All arrays in js are objects and all objects are just associative arrays, this means you can refer to a place in an object just as you would refer to a key in an array.
js 中的所有数组都是对象，所有对象都只是关联数组，这意味着您可以引用对象中的位置，就像引用数组中的键一样。
arr[0]
or the object
或对象
obj["method"] == obj.method
a couple things to remember when accessing properties this way
以这种方式访问属性时要记住的几件事
they are evaluated so use strings unless you are doing something with a counter or using dynamic method names.
this means obj[method] would give you an undefined error while obj["method"] would not
You must use this notation if you are using characters that are not allowed in js variables.
它们被评估，因此使用字符串，除非您正在使用计数器或使用动态方法名称执行某些操作。
这意味着 obj[method] 会给你一个未定义的错误，而 obj["method"] 不会
如果您使用 js 变量中不允许使用的字符，则必须使用此表示法。
This regex pretty much sums it up
这个正则表达式几乎总结了它
[a-zA-Z_$][0-9a-zA-Z_$]*
回答by jAndy
CSS properties with a -are represented in camelCase in Javascript objects. That would be:
带有 的 CSS 属性-在 Javascript 对象中以驼峰命名。那将是：
alert( style.textAlign );
You could also use a bracket notation to use the string:
您还可以使用括号表示法来使用字符串：
alert( style['text-align'] );
Property names may only contain characters, numbers, the well known $sign and the _(thanks to pimvdb).
属性名称只能包含字符、数字、众所周知的$符号和_（感谢 pimvdb）。
回答by Stoney
The answer to the original question is: place the property name in quotes and use array style indexing:
原始问题的答案是：将属性名称放在引号中并使用数组样式索引：
obj['property-with-hyphens'];
Several have pointed out that the property you are interested in is a CSS property. CSS properties that have hyphens are automatically converted to camel casing. In that case you can use the camel cased name like:
一些人指出您感兴趣的属性是 CSS 属性。带有连字符的 CSS 属性会自动转换为驼峰式大小写。在这种情况下，您可以使用驼峰式名称，例如：
style.textAlign;
However this solution only works for CSS properties. For example,
但是，此解决方案仅适用于 CSS 属性。例如，
obj['a-b'] = 2;
alert(obj.aB); // undefined
alert(obj['a-b']); // 2
回答by Joe
Use brackets:
使用括号：
var notTheFlippingStyleObject = {
'a-b': 1
};
console.log(notTheFlippingStyleObject["a-b"] === 1); // true
More info on objects: MDN
关于对象的更多信息：MDN
NOTE: If you are accessing the styleobject, CSSStyleDeclaration, use must camelCase to access it from javascript. More info here
注意：如果您正在访问样式对象CSSStyleDeclaration，请使用 must camelCase 从 javascript 访问它。更多信息在这里
回答by Dawson Toth
To directly answer the question: style['text-align']is how you would reference a property with a hyphen in it. But style.textAlign(or style['textAlign']) is what should be used in this case.
直接回答这个问题：style['text-align']如何引用带有连字符的属性。但是style.textAlign(or style['textAlign']) 是在这种情况下应该使用的。
回答by Brian
alert(style.textAlign)
or
或者
alert(style["textAlign"]);
回答by Jonny Buchanan
Hyphenated style properties are referenced via camelCase in JavaScript, so use style.textAlign.
在 JavaScript 中通过camelCase 引用带连字符的样式属性，因此请使用style.textAlign.
回答by Quentin
To solve your problem: The CSS properties with hyphens in them are represented by JavaScript properties in camelCaseto avoid this problem. You want: style.textAlign.
解决您的问题：其中带有连字符的 CSS 属性由驼峰式中的 JavaScript 属性表示，以避免此问题。你要：style.textAlign。
To answer the question: Use square bracket notation: obj.propis the same as obj["prop"]so you can access property names using strings and use characters that are forbidden in identifiers.
回答这个问题：使用方括号表示法：obj.prop与obj["prop"]您可以使用字符串访问属性名称并使用标识符中禁止的字符相同。
回答by Doug Chamberlain
The object property names are not one-to-one matches for the css names.
对象属性名称不是 css 名称的一对一匹配。
回答by GordonM
I think in the case of CSS styles they get changed to camelCase in Javascript so test-alignbecomes textAlign. In the general case where you want to access a property that contains non-standard characters you use array-style. ['text-align']
我认为在 CSS 样式的情况下，它们在 Javascript 中更改为驼峰式大小写，因此test-align变为textAlign. 在您想要访问包含非标准字符的属性的一般情况下，您使用数组样式。 ['text-align']
