5

我了解到 HTML5 包含一种使用 data- 前缀在元素上设置自定义属性的方法。但是，在如何在 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 画布、视频和本地数据存储的了解仍然越来越多：)

4

4 回答 4

11

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

spanEl.dataset.complexKey

当您的数据属性包含连字符(camelCase )并且-

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

正如您已经注意到的那样，它将正常工作。附带说明一下，在 jQuery 中，您可以data使用

$(spanEl).data("complex-key")
于 2012-09-26T16:35:38.013 回答
2

在 Chrome 中，它似乎以一种不那么直接的方式映射数据键：

console.log(spanEl.dataset);​​​​​​​​​​​​​​
//shows:
//DOMStringMap
//  complexKey: "howtoRead"
//  id: "anId"

它将“complex-key”转换为“complexKey”。

虽然不是完全简单，但此行为在此处的 HTML5 规范中定义：

http://dev.w3.org/html5/spec//global-attributes.html#dom-dataset

于 2012-09-26T16:50:15.703 回答
1

您的第一个和最后一个方法在不使用任何库的情况下是正确的。然而，带有减号的键被转换为驼峰式，因此 complex-key 变为 complexKey：

spanEl.dataset['id']
spanEl.dataset['complexKey']
spanEl.getAttribute('data-complex-key')

但是，只有最后一个在 IE 中工作，最多 9 个。（我不知道 10 个。）在这种情况下，数据属性只不过是具有命名约定的普通属性。

于 2012-09-26T16:50:31.280 回答
0 
 spanEl.dataSet["complexKey"]

//使用jQuery你可以试试这个

 $('span').data('complex-key')  // Will give you **howtoRead**

    $('span').data('id')  // Will give you **anId**
于 2012-09-26T16:36:53.283 回答