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

Using this script to 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?

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

11 个解决方案

#1

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

这意味着obj [method]会给你一个未定义的错误，而obj [“method”]则不会
You must use this notation if you are using characters that are not allowed in js variables.

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

This regex pretty much sums it up

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

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

#2

CSS properties with a - are represented in camelCase in Javascript objects. That would be:

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

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）。

#3

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

#4

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 style object, CSSStyleDeclaration, use must camelCase to access it from javascript. More info here

注意：如果您正在访问样式对象CSSStyleDeclaration，请使用camelCase从javascript访问它。更多信息在这里

#5

Hyphenated style properties are referenced via camelCase in JavaScript, so use style.textAlign.

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

#6

To solve your problem: The CSS properties with hyphens in them are represented by JavaScript properties in camelCase to avoid this problem. You want: style.textAlign.

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

To answer the question: Use square bracket notation: obj.prop is 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”]相同，因此您可以使用字符串访问属性名称并使用标识符中禁止的字符。

#7

alert(style.textAlign)

要么

alert(style["textAlign"]);

#8

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（或style ['textAlign']）是在这种情况下应该使用的。

#9

The object property names are not one-to-one matches for the css names.

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

#10

I think in the case of CSS styles they get changed to camelCase in Javascript so test-align becomes 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中变为camelCase，因此test-align变为textAlign。在您想要访问包含非标准字符的属性的一般情况下，您使用数组样式。 [“文本对齐”]

#11

-1

At first, I wonder why the solution didn't work on my end

起初，我想知道为什么解决方案不适合我

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

...later on figure out that accessing data attributes is different: It should be like this:

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

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

Hope this helps!

希望这可以帮助！

#1