用于读取HTML5自定义数据属性的本机JS

Question

我了解到HTML5包含一种使用数据前缀在元素上设置自定义属性的方法.但是,在javascript代码块中如何读取属性方面我有点神秘.我想这是我对DOMStringMap如何工作的解释.

有人可以简化如何阅读以下示例html的属性.

<span data-complex-key="howtoRead" data-id="anId">inner</span>

尝试以下并没有按预期工作

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

让我想知道的另一件事是,CSS选择器似乎遵循与我在DOM中编写的精确相同的模式,所以为什么这不是从javascript读取的情况.

例如,这将匹配

 span[data-complex-key="howtoRead"] { color:green }

欣赏帮助,仍然越来越多地使用HTML5 Canvas,Video和本地数据存储:)

Answer 1

在vanilla-JS中,假设spanEl是对DOM节点的引用

spanEl.dataset.complexKey

当您的数据属性包含hypens()时,将使用camelCase表示法(请参阅http://jsbin.com/oduguw/3/edit)-

spanEl.getAttribute('data-complex-key')

你已经注意到会好起来的.作为旁注,在jQuery中,您可以使用该data属性访问该属性

$(spanEl).data("complex-key")