HTML5里的data-*是用来做什么的?

HTML5里的data-*是用来做什么的?,第1张

那个其实不属于正规的HTML属性,是jquery这个库专门用来寻址的一种自定属性,其他库也有类似的这种;利用它的目的是库自定义的属性,所以可以在库中更方便的区分其他HTML自带的属性,用获得的值来做的事情很多,比如data-target=id2,可以取得id2这个相关联的DOM元素

html中data-myvalue是自定义标签,属性名是data-myvalue。

HTML标签可以自定义属性,但是我们要考虑其在IE、Firefox以及chrome下的兼容性问题。

例如:

<div id="newTest" myAttr="getAttr"></div>

这里的“myAttr”就是这个标签的自定义属性了。

如果定义了属性却使用不了,那么这个属性就没有任何意义了,接下来就是去调用自定义属性的值了。

在IE浏览器里,通过获取对象后直接调用就可以了

document.getElementById("newTest").myAttr

在IE浏览器里,同样可以对其直接赋值而动态产生一个自定义属性:

document.getElementById("newTest").newAttr = "new"

在火狐和谷歌浏览器里,可以通过getAttribute方法来实现调用:

document.getElementById("newTest").getAttribute("myAttr")

在火狐和谷歌浏览器里,可以通过setAttribute方法在产生并设置一个自定义属性:

document.getElementById("newTest").setAttribute("newAttr","new")

自定义属性一般是用来存储数据或是相关依据的,根据实际情况,自定义属性其实很有用的。

HTML中div里有data-index="6" 是自定义属性data-index的值为6的意思。

自定义数据属性的好处:

我们经常需要存储与不同DOM元素相关的信息。这些信息对读者来说可能并不重要,但如果

能够轻松访问它,将使我们的开发人员的生活变得更加轻松。

例如,假设您在网页上列出了不同的餐馆。在HTML5之前,如果您想存储有关餐馆提供的食物

类型或访问者距离的信息,您可以使用HTML class属性。如果您还需要存储餐厅id以查看用户

想要访问的特定餐厅,该怎么办?

为了摆脱这些问题,HTML5引入了自定义数据属性。名称以元素开头的元素的所有属性data-

都是数据属性。您还可以使用这些数据属性来设置元素的样式。

接下来,让我们深入了解数据属性的基础知识,并学习如何在JavaScript中访问它们的值。

正如我之前提到的,数据属性的名称将始终以data-。这是一个例子:

<li data-type="veg" data-distance="2miles" data-identifier="10318">

Salad King</li>

您现在可以使用这些数据属性来搜索和排序访问者的餐馆。例如,您现在可以向他们展示一定

距离内的所有素食餐厅。

扩展资料:

使用自定义属性的注意事项:

1、存储在这些属性中的数据应为string类型。任何可以进行字符串编码的东西也可以存储

在数据属性中。所有类型的转换都需要在JavaScript中完成。

2、只有在没有其他适当的HTML元素或属性时才应使用数据属性。例如,在元素class中存

储元素是不合适的data-class。

3、除data-前缀外,有效自定义数据属性的名称必须仅包含字母,数字,连字符( - ),点

(。),冒号(:)或下划线(_)。它不能包含大写字母。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7579937.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存