使用html "data-“属性

Question

考虑下面这样的一行：

<div id='abc' onclick='DoSomething(this.id)'></div>

现在，假设它被扩展为更像这样的东西：

<div id='abc' data-something='whatever' onclick='DoSomething(this.id)'></div>

这里还没有功能上的区别，但这是我的问题。我正在寻找一种方法，将“data-something”的值传递给DoSomething函数，而不是id。我似乎找不到这样做的方法？有可能吗？

类似下面的代码会很好，但当然不是这样的。(我将其包括在内只是为了帮助说明预期的目标。

<div id='abc' data-something='whatever' onclick='DoSomething(this.data-something)'></div>

Answer 1

您应该能够执行this.getAttribute("data-something")，如下所示：

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something"))></div>

或者，您可以使用this.dataset.something。

Here is my source

Answer 2

你可以做到

DoSomething(this.dataset.something)

但通常建议将javascript部分和HTML分开，当您的元素具有id时，这尤其容易：

<div id='abc' data-something='whatever'></div>
<script>
    document.getElementById('abc').onclick = function(){
        DoSomething(this.dataset.something)
    }
</script>

在On浏览器上，support for dataset is incomplete。在IE10-上，您需要使用

DoSomething(this.getAttribute('data-something'))

Answer 3

您应该使用getAttribute方法：

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something")'></div>

但我强烈建议您避免使用javascript对元素进行内联委托。为此，您最好使用DOM或jQuery，请注意，jQuery有一种更容易处理数据的方法--*属性。