无jQuery访问'数据'属性

Question

我可以在没有jQuery的情况下访问数据属性吗？

用jQuery很容易，但是我看不到没有jQuery的地方。

如果我在Google上搜索'没有jQuery'，我只能看到jQuery的例子。

这有可能吗？

Answer 1

在here我发现这个例子：

<div id='strawberry-plant' data-fruit='12'></div> 
<script> 
    // 'Getting' data-attributes using getAttribute 
    var plant = document.getElementById('strawberry-plant'); 
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12' 
    // 'Setting' data-attributes using setAttribute 
    plant.setAttribute('data-fruit', '7'); // Pesky birds 
</script> 

所以看上去非常可行的。

Answer 2

这只是一个属性...使用getAttribute与任何其他属性：https://developer.mozilla.org/en/docs/DOM/element.getAttribute

还是我失去了你的问题点。

Answer 3

您可以使用数据集属性。如：

element = document.getElementById("el"); 
alert(element.dataset.name); // element.dataset.name == data-name 

Answer 4

我想你可以试试这个：

var ele = document.getElementById("myelement"); 
if (ele.hasOwnProperty("data")) { 
    alert(ele.data); 
} 

或使用

alert(ele['data-property']);