Question

使用this script制作所有继承的等样式的样式对象。

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

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

Answer 1

修改

查看您将看到的注释，对于css属性，键符号与许多属性不兼容。因此，使用驼峰案例键符号是当前的方式

obj.style-attr // would become obj["styleAttr"]

使用关键符号而不是点

style["text-align"]

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

arr[0]

或对象

obj["method"] == obj.method

以这种方式访问属性时要记住的几件事

对它们进行评估，因此除非您使用计数器或使用动态方法名称，否则请使用字符串。

这意味着obj [method]会给你一个未定义的错误而obj [“方法”]不会

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

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

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

Answer 2

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

alert( style.textAlign );

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

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

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

Answer 3

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

obj['property-with-hyphens'];

有几个人指出你感兴趣的属性是CSS属性。具有连字符的CSS属性会自动转换为驼峰套管。在这种情况下，您可以使用驼峰式名称，如：

style.textAlign;

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

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

Answer 4

使用括号：

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

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

有关对象的更多信息：MDN

注意：如果您正在访问style对象CSSStyleDeclaration，请使用必须camelCase从javascript访问它。更多信息here

Answer 5

alert(style.textAlign)

或

alert(style["textAlign"]);

Answer 6

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

Answer 7

连字样式属性为referenced via camelCase in JavaScript，因此请使用style.textAlign。

Answer 8

解决您的问题：其中带有连字符的CSS属性为represented by JavaScript properties in camelCase，以避免此问题。你想要：style.textAlign。

要回答问题：使用square bracket notation：obj.prop与obj["prop"]相同，因此您可以使用字符串访问属性名称并使用被禁止的字符在标识符中。

Answer 9

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

Answer 10

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

Answer 11

起初，我想知道为什么解决方案不适用于我的最终

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

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

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

希望这有帮助！

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

11 个答案: