[英]Native JS for Reading HTML5 Custom Data Attributes
I have learned that HTML5 includes a means to set custom attributes on elements using the data- prefix. 我了解到HTML5包含一种使用数据前缀在元素上设置自定义属性的方法。 However I'm a bit scewered in terms of how to read the properties during a javascript code block. 但是,在javascript代码块中如何读取属性方面我有点神秘。 I guess it is my interpretation of how the DOMStringMap is working thats off. 我想这是我对DOMStringMap如何工作的解释。
Could someone simplify how to read the properties of the following sample html. 有人可以简化如何阅读以下示例html的属性。
<span data-complex-key="howtoRead" data-id="anId">inner</span>
Trying following doesnt really work as expected 尝试以下并没有按预期工作
spanEl.dataset['id'] // straight-forward and result is anId
spanEl.dataset['complex-key'] // undefined
spanEl.dataset['complex']['key'] // throws 'cannot read property of undefined'
spanEl.getAttribute('complex-key') // there's a null however,
spanEl.getAttribute('data-complex-key') // this variant seems to work
Another thing that makes me wonder is, the CSS selectors seems to follow the excact same pattern as to which is i written in the DOM, so why is this not the case with reading from javascript. 让我想知道的另一件事是,CSS选择器似乎遵循与我在DOM中编写的精确相同的模式,那么为什么这不是从javascript读取的情况。
For instance, this would match 例如,这将匹配
span[data-complex-key="howtoRead"] { color:green }
Appreciate the help, still getting more and more intreaged with the HTML5 Canvas, Video and local Data Storage :) 欣赏帮助,仍然越来越多地使用HTML5 Canvas,Video和本地数据存储:)
In vanilla-JS, assuming spanEl
is a reference to the DOM node 在vanilla-JS中,假设spanEl
是对DOM节点的引用
spanEl.dataset.complexKey
will work using the camelCase
notation (see http://jsbin.com/oduguw/3/edit ) when your data attribute contains hypens ( -
) and also 当您的数据属性包含超量( -
)时,将使用camelCase
表示法(请参阅http://jsbin.com/oduguw/3/edit )
spanEl.getAttribute('data-complex-key')
will work fine as you already noticed. 你已经注意到会好起来的。 As a side note, in jQuery you can access to that data
attribute with 作为旁注,在jQuery中,您可以使用访问该data
属性
$(spanEl).data("complex-key")
In Chrome, it seems to map the data keys in a not-so-straightforward way: 在Chrome中,它似乎以一种不那么直接的方式映射数据键:
console.log(spanEl.dataset);
//shows:
//DOMStringMap
// complexKey: "howtoRead"
// id: "anId"
It converts "complex-key" to "complexKey". 它将“complex-key”转换为“complexKey”。
While not being completely straightforward, this behavior is defined in the HTML5 spec here: 虽然不是完全直截了当,但这种行为在HTML5规范中定义:
http://dev.w3.org/html5/spec//global-attributes.html#dom-dataset http://dev.w3.org/html5/spec//global-attributes.html#dom-dataset
Your first and last method are correct while not using any libraries. 您的第一个和最后一个方法是正确的,而不使用任何库。 However a key with a minus sign is converted to Camel Case, so complex-key becomes complexKey: 但是,带减号的键会转换为Camel Case,因此complex-key会变为complexKey:
spanEl.dataset['id']
spanEl.dataset['complexKey']
spanEl.getAttribute('data-complex-key')
However, only the last one works in IE up to 9. (I don't know about 10.) The data attributes are nothing else than normal attributes having a naming convention in this case. 但是,只有最后一个在IE中工作到9个。(我不知道10个。)数据属性只不过是在这种情况下具有命名约定的普通属性。
spanEl.dataSet["complexKey"]
//Using jQuery you can try this //使用jQuery你可以尝试这个
$('span').data('complex-key') // Will give you **howtoRead**
$('span').data('id') // Will give you **anId**
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.