不使用jQuery访问'data-'属性

Question

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

使用jQuery很容易,但是如果没有jQuery,我无法在任何地方看到如何做到这一点.

如果我在没有jQuery的情况下搜索Google,我得到的就是jQuery示例.

它甚至可能吗？

Answer 1

在这里我发现了这个例子:

<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

您可以使用dataset属性.如:

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