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

Question

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

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

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

1. 它们被评估,因此除非您使用计数器或使用动态方法名称,否则请使用字符串.

   这意味着obj [method]会给你一个未定义的错误,而obj ["method"]则不会

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

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

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

Answer 2

带有a的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

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

Answer 5

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

Answer 6

alert(style.textAlign)

或者

alert(style["textAlign"]);