假设我有这个：
<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this.data.uid, this.data-name, this.data-value)">
还有这个：
function fun(one, two, three) {
//some code
}
好吧，这不起作用，但我完全不知道为什么。有人可以发布一个工作示例吗？
【问题讨论】：
标签： javascript html parameters
获取data-* 属性的最简单方法是使用element.getAttribute()：
onclick="fun(this.getAttribute('data-uid'), this.getAttribute('data-name'), this.getAttribute('data-value'));"
演示： http://jsfiddle.net/pm6cH/
虽然我建议将this 传递给fun()，并在fun 函数内部 获取3 个属性：
onclick="fun(this);"
然后：
function fun(obj) {
var one = obj.getAttribute('data-uid'),
two = obj.getAttribute('data-name'),
three = obj.getAttribute('data-value');
}
演示： http://jsfiddle.net/pm6cH/1/
通过属性访问它们的新方法是使用dataset，但并非所有浏览器都支持。你会像下面这样得到它们：
this.dataset.uid
// and
this.dataset.name
// and
this.dataset.value
演示： http://jsfiddle.net/pm6cH/2/
还要注意，在您的 HTML 中，此处不应有逗号：
data-name="bbb",
参考资料：
element.getAttribute(): https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
.dataset: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
.dataset 浏览器兼容性：http://caniuse.com/dataset
【讨论】：
如果您使用的是 jQuery，您可以轻松地通过以下方式获取数据属性
$(this).data("id") or $(event.target).data("id")
【讨论】：
简短的回答是语法是this.dataset.whatever。
您的代码应如下所示：
<div data-uid="aaa" data-name="bbb" data-value="ccc"
onclick="fun(this.dataset.uid, this.dataset.name, this.dataset.value)">
另一个重要提示： Javascript 将始终去掉连字符并使数据属性为驼峰式，无论您使用何种大小写。 data-camelCase 将变为 this.dataset.camelcase 和 data-Camel-case 将变为 this.dataset.camelCase。
jQuery（在 v1.5 和更高版本之后）总是使用小写字母，无论您的大小写如何。
因此，当使用此方法引用您的数据属性时，请记住驼峰式：
<div data-this-is-wild="yes, it's true"
onclick="fun(this.dataset.thisIsWild)">
另外，您不需要使用逗号来分隔属性。
【讨论】：
HTML：
<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this)">
JavaScript：
function fun(obj) {
var uid= $(obj).attr('data-uid');
var name= $(obj).attr('data-name');
var value= $(obj).attr('data-value');
}
但我使用的是 jQuery。
【讨论】：
.data()方法。
你可以在你的函数中使用默认参数 然后只传递整个数据集本身，因为 dataset 已经是一个 DOMStringMap 对象
<div data-uid="aaa" data-name="bbb" data-value="ccc"
onclick="fun(this.dataset)">
<script>
const fun = ({uid:'ddd', name:'eee', value:'fff', other:'default'} = {}) {
//
}
</script>
这样，您可以处理在 html 标记中设置的任何数据值， 或者在没有设置的情况下使用默认值 - 那种东西
可能不是在这种情况下，但在其他情况下，将所有 您在单个数据属性中的偏好
<div data-all='{"uid":"aaa","name":"bbb","value":"ccc"}'
onclick="fun(JSON.parse(this.dataset.all))">
如果你已经知道的话，可能还有更简洁的方法 关于数据顺序的某些事情
<div data-all="aaa,bbb,ccc" onclick="fun(this.dataset.all.split(','))">
【讨论】：
JS：
function fun(obj) {
var uid= $(obj).data('uid');
var name= $(obj).data('name');
var value= $(obj).data('value');
}
【讨论】：