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

Question

我想知道对元素使用 data-varname 属性的浏览器兼容性是什么样的？

在我的整个网站中，我使用数据属性来指示行号、参考 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- 属性有多“安全”。它是否非常普遍兼容，或者仍然有很多浏览器无法正常运行？

Answer 1

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

如果您使用新的 API，那么您将需要一个适用于旧版浏览器和那些尚未对该 API 提供本机支持的浏览器的 Polyfill，但您所做的并不使用该 API。