原生JS用于读取HTML5自定义数据属性

我已经了解到，HTML5包含一种使用数据前缀在元素上设置自定义属性的方法。不过，在JavaScript代码块中，如何阅读属性，我有点难以接受。我想这是我对DOMStringMap如何工作的解释。原生JS用于读取HTML5自定义数据属性

有人可以简化如何阅读以下示例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中excact相同的模式，所以为什么从javascript读取这种情况并非如此。

例如，这将匹配

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

感谢帮助，还得到更多与HTML5的Canvas，视频和本地数据存储:)

来源

2012-09-26 mschr

您不应该在属性键BTW中使用破折号，在这里更好地选择驼峰型complexKey。 – m90

在香草JS更intreaged，假设spanEl是的DOM节点

spanEl.dataset['complexKey']

将努力使用驼峰记法（见http://jsbin.com/oduguw/3/edit）当你的数据属性CON参考含有杂质hypens（-），也

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

将正常工作，因为你已经注意到了。作为一个方面说明，在jQuery的你可以访问到data属性与

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

来源

2012-09-26 16:35:38 fcalderan

我想知道它是如何从本地javascript读取的 – mschr

-1：问题没有用jQuery标记。 – Shmiddty

@Shmiddty，我已经更新了我的回答 – fcalderan

spanEl.dataSet["complexKey"]

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

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

    $('span').data('id') // Will give you **anId**

来源

2012-09-26 16:36:53

-1：该问题未使用jQuery进行标记。 – Shmiddty

@Shmiddty更新了代码 –

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

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

它把“复合键”到“complexKey”。

虽然不是完全明了，这种行为是在HTML5规范定义如下：

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

来源

2012-09-26 16:50:15 Shmiddty

你的第一和最后一个方法，同时不使用任何库是正确的。然而，随着减号键被转换为驼峰，如此复杂键变为complexKey：

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

然而，只有最后一个在IE工作到9（我不知道10）在这种情况下，数据属性不同于具有命名约定的普通属性。

来源

2012-09-26 16:50:31

原生JS用于读取HTML5自定义数据属性

回答

相关问题