如何引用带有连字符的JavaScript对象属性?
我正在使用创建所有继承样式等样式的样式对象如何引用带有连字符的JavaScript对象属性?,javascript,properties,Javascript,Properties,我正在使用创建所有继承样式等样式的样式对象 var style = css($(this)); alert (style.width); alert (style.text-align); 在以下情况下,第一个警报将正常工作,但第二个警报不正常。。。它将-解释为一个负号。调试器显示“未捕获引用错误”。不过,我不能在它周围加引号,因为它不是字符串。那么如何使用此对象属性?使用括号: var notTheFlippingStyleObject = { 'a-b': 1 }; consol
var style = css($(this));
alert (style.width);
alert (style.text-align);
在以下情况下,第一个警报将正常工作,但第二个警报不正常。。。它将-
解释为一个负号。调试器显示“未捕获引用错误”。不过,我不能在它周围加引号,因为它不是字符串。那么如何使用此对象属性?使用括号:
var notTheFlippingStyleObject = {
'a-b': 1
};
console.log(notTheFlippingStyleObject["a-b"] === 1); // true
有关对象的详细信息:
注意:如果要访问对象,必须使用camelCase从JavaScript访问它。更多信息请参见。查看评论。您将看到,对于CSS属性,键表示法与许多属性不兼容。因此,当前的方式是使用camel case键表示法:
obj.style-attr // would become
obj["styleAttr"]
使用键符号而不是点符号
style["text-align"]
JavaScript中的所有数组都是对象,所有对象都只是关联数组。这意味着您可以引用对象中的位置,就像引用数组中的键一样
arr[0]
还是这个对象
obj["method"] == obj.method
以这种方式访问属性时要记住以下几点:
[a-zA-Z_$][0-9a-zA-Z_$]*
直接回答以下问题:
style['text-align']
是如何引用带有连字符的属性。但是style.textAlign
(或style['textAlign']
)是这种情况下应该使用的。带有-
的CSS属性在JavaScript对象中以camelCase形式表示。这将是:
alert( style.textAlign );
您还可以使用括号表示法来使用字符串:
alert( style['text-align'] );
属性名称只能包含字符、数字、众所周知的
$
符号和
(多亏了pimvdb)。对象属性名称与CSS名称不一一匹配。连字符样式属性是,因此,请使用style.textAlign
原始问题的答案是:将属性名称置于引号中,并使用数组样式索引:
obj['property-with-hyphens'];
一些人指出,您感兴趣的属性是CSS属性。具有连字符的CSS属性将自动转换为驼峰式大小写。在这种情况下,您必须使用驼峰式大小写名称,如:
style.textAlign;
但是,此解决方案仅适用于CSS属性。比如说,
obj['a-b'] = 2;
alert(obj.aB); // undefined
alert(obj['a-b']); // 2
解决您的问题:带有连字符的CSS属性可避免此问题。您需要:
style.textAlign
回答问题:使用:obj.prop
与obj[“prop”]
相同,因此您可以使用字符串访问属性名称,并使用标识符中禁止的字符
alert(style.textAlign)
或
我认为在CSS样式的情况下,它们会在JavaScript中更改为camelCase,因此
testalign
变成textalalign
在一般情况下,如果要访问包含非标准字符的属性,请使用数组样式:
['text-align']
,首先,我想知道为什么解决方案在我这方面不起作用:
api['data-sitekey'] // Returns undefined
…后来我发现访问数据属性是不同的:
应该是这样的:
var api = document.getElementById("some-api");
api.dataset.sitekey
后者有效。。我刚刚错过的一件联合体的事情。我引用的脚本使用常规css样式名称,但仍然很有用!属性名称不能以数字开头,因为属性名称可能包含大量Unicode字符。规范和浏览器都可以。例如:
varòuó=‘愤怒’代码>不要使用第二个代码。CSS属性是驼峰式的。您的代码可能在某些浏览器上工作,但不是标准的。此处不适用键符号-css在键中使用驼峰大小写定义样式:什么浏览器?在IE7,IE8,FFX3.5中的连字符对我来说失败了。布莱恩在safari和chrome中测试显示红色、红色、中间、中间。我将在ff试一试now@brian有趣的是,我没有在firefox6中工作,我不知道。。。每天学习新内容删除了我的否决票,因为另一位回复者指出CSS集合恰好是这个问题的主题,但实际的问题是如何获得连字号属性。你不是在安抚我-你是在安抚w3c标准,根据这个问题的众多其他回复者:,但同样的,不要使用这个代码。这并不是因为驼峰式CSS属性更适合跨浏览器,而是使用连字符而不是驼峰式CSS属性是不标准的,不应该起作用。第一个和最后一个链接都断了(“找不到页面”)。哦,伙计。修复所有这些都需要一段时间。我希望我能找到一些东西来自动化这个过程。@Brian您对CSS属性的理解是正确的。然而,我回答了最初的一般性问题“如何引用带有连字符的javascript对象属性?”这里是JSFIDLE的更新版本:事实上,我自己缩小了答案的范围——我假设OP是指特定样式的对象。删除了我的反对票,因为这个问题比这个问题更具开放性。我认为你是对的。这可能就是达蒙想要的。我读得太逐字逐句了。你必须用骆驼壳的名字。不能。不要用这个。CSS属性是驼峰式的。您的代码可能在某些浏览器上工作,但不是标准的。调整为使用驼峰大小写。Damon,解决歧义和混淆(也反映在不同的答案和根据解释添加/删除的否决票中…):您是否特别指CSS属性,正如您的示例所暗示的和大多数答案所假设的那样,或者任何JS属性,一般来说,如标题和
var api = document.getElementById("some-api");
api.dataset.sitekey