DOM data-x 属性兼容性——这样安全吗？

Question

我想知道为元素使用 data-varname 属性时浏览器的兼容性如何？

在我的整个站点中，我都在使用 data- 属性来指示行号、引用 ID 等，以进行 ajax 删除和插入。

例如：

<ul>
    <li data-row="1">First Row <a href="#" data-row="1" data-id="123">remove</a></li>
    <li data-row="2">Second Row <a href="#" data-row="1" data-id="111">remove</a></li>
</ul>

$(document).ready(function(){
    $("li a").click(function(){
        var index = $(this).attr("data-row");
        $("li [data-row='" + index + "']").remove();
            // ajax deletion in database referencing data-id attribute
    });
});

我知道我可以只引用锚的父级来删除它，而不是查看元素的 data-row 属性，但这只是展示它的基本用法的一个示例。这实际上不是我正在做的.

我想知道使用这个 data- 属性有多“安全”。它是否非常普遍兼容，还是仍有大量浏览器无法正常运行？

Answer 1

这是完全安全的。浏览器总是接受无法识别的属性。 data-* 属性发生的所有事情是 HTML5 定义了 (a) 这些名称永远不会用于任何其他官方目的，以及 (b) 一个 API，使在 JavaScript 中访问这些值更加方便。

如果您使用新的 API，那么您将需要针对旧浏览器和尚未原生支持该 API 的浏览器使用 polyfill，但您所做的事情并未使用该 API。