Question

我需要使用javascript从我的网站访问一般信息。到目前为止，我有以下选择：

使用html元素：<input type="hidden" value="MyValue"/>
在现有html元素中使用自定义属性：<div id="HtmlElement" myattr="MyValue"></div>然后使用document.getElementById("HtmlElement").getAttribute("myattr")
在现有的html元素中使用数据属性：<div id="HtmlElement" data-myattr="MyValue"></div>然后使用jQuery("#HtmlElement").data("myattr")

我想知道使用任一选项有什么好处。

我不喜欢使用隐藏输入，因为我不喜欢使用包含信息的松散html元素。但是因为我需要它来显示一般信息，而不是与页面中现有html元素相关的信息，所以它看起来并不那么糟糕。

另一方面，我不是滥用外部库的粉丝，但在我的情况下，我已经在我的网站上加载了jQuery，所以这并不像我为此加载整个库

最后，即使是面团性能也是一个问题，在我看来，如果它是最快的解决方案，它将不会有太大的影响。

Answer 1

我会使用数据属性，因为这就是它们的用途，现代浏览器有一个用于访问它们的本机API，同时仍然允许非现代浏览器将它们作为自定义属性访问。

给出这个html：

<div data-foo="bar"></div>

// modern browser:
foo = document.getElementByID("myelementid").dataset.foo;

// older browser:
foo = document.getElementByID("myelementid").getAttribute("data-foo");

// jQuery (all browsers)
foo = $("#myelementid").data("foo");

注意如果您的数据属性为data-foo-bar，则dataset和.data中的密钥将为fooBar

正如sdespont所提到的，数据应与您存储它的元素相关。

<强>更新
同样重要的是要注意，您也可以使用.attr方法获取数据属性的值，但两者之间存在非常重要的差异。使用.data获取数据属性的值将尝试将属性的值解析为正确的javascript 类型，例如，如果它可以转换为int，则它将转换为int。如果它可以转换为对象或数组，它将被转换为对象或数组。如果你改为使用.attr()，你可以确定你总是有一个字符串。

可能还值得一提的是，使用.attr()优先使用.data()，除非您特别需要.data()给出的功能，因为使用.data()，将为该元素及其数据创建数据缓存，除非您实际打算多次使用.data()或需要.data()

提供的额外功能，否则不需要数据缓存

使用jQuery data（）vs native javascript getAttribute vs input hidden

1 个答案: