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-前缀外,有效自定义数据属性的名称必须仅包含字母,数字,连字符( - ),点
(。),冒号(:)或下划线(_)。它不能包含大写字母。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)