使用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

你可以做

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上,对数据集的支持不完整.在IE10-上,您需要使用

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

Answer 2

你应该可以this.getAttribute("data-something")这样做:

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

或者你可以使用this.dataset.something.

这是我的来源