我可以在div上使用自定义属性吗？

Question

我需要在jQuery中获取数字值，但是要使其正常工作，我需要在div上添加第3个属性。

<div class="button" id="button$post" numberlk="$total">

这很好！但是HTML验证程序告诉我：

错误：此时元素div上不允许使用属性numberlk。

我该怎么做才能使其正常工作？

Answer 1

虽然可以在HTML中创建自己的属性，但不应该。这是因为它使HTML无效，这可能导致UI以及页面上运行的任何Javascript出现意外问题。

将自定义元数据存储在元素的HTML中的一种更好的方法是改用data属性，例如data-numberlk="$totallikes"：

<div class="button" id="button$post" data-numberlk="$total">

然后您可以使用data()方法在jQuery中检索此值：

var likes = $('.button').data('numberlk');

或使用普通的JS：

var likes = document.querySelector('.button').dataset.numberlk;