javascript - 使用 html "data-"属性

Question

考虑这样一行:

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

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

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

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

像下面这样的东西会很好，但当然它不是这样工作的。 (我包含它只是为了帮助说明预期目标。

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

Answer 1

你可以做到

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>

在 Internet Explorer 上，support for dataset is incomplete .在 IE10- 上，您需要使用

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