無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']);