首页 > 试题广场 >

`data-`属性的作用是什么?

[问答题]

http://www.w3school.com.cn/tags/att_global_data.asp
data- 属性是 HTML5 中的新属性,用于存储页面或应用程序的私有自定义数据。data-赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
data-* 属性包括两部分:
1.属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
2.属性值可以是任意字符串
注释:用户***会完全忽略前缀为 "data-" 的自定义属性。

<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li> 
<li data-animal-type="蜘蛛">蝇虎</li> 
</ul>
发表于 2018-03-06 17:12:27 回复(0)

data-*是 HTML5 中的新属性,用于存储某个dom元素的自定义数据。

1、javascript使用:getAttribute、dataset


<div id="test" data-name="wsx">

var ele = document.getElementById("test")

ele.setAttribute("data-name", "qwe")
console.log(ele.getAttribute("data-name"))

ele.dataset.name = "qwe"
console.log(ele.dataset.name)
2、jQuery使用:attr、data
<div id="test" data-name="wsx">

$("#test").attr("data-name","asd")
console.log($("#test").attr("data-name"))

$("#test").data("name", "zxc")
console.log($("#test").data("name"))
3、如果是 data-abc-abc-abc 的格式,则采用首字母小写的驼峰式 abcAbcAbc 读写该自定义属性值
data-info-name => $("#test").data(infoName)
编辑于 2019-08-02 16:25:53 回复(0)

data-是h5新增属性 -后面为自定义名称 可存储数据 存储的数据可以根据dataset获取 若浏览器不支持则采用getAttribute获取数据

发表于 2019-06-05 19:23:28 回复(0)
data属性是H5的新属性。
作用:用于存储页面或应用程序的私有自定义数据
应用场景:
JavaScript中使用:
设置data属性:元素.setAttribute("key","value")
获取data属性: 元素.getAttribute("key");
jquery中使用:(分别可以通过attr 或 data)
设置data属性: $("元素").attr("key","value")
$("元素").data("key","value") (省去data的命名key)
发表于 2021-03-30 22:03:02 回复(0)
<p>为开发者提供自定义属性</p><p><br></p>
发表于 2020-08-29 11:20:30 回复(0)

自定义属性,方便开发者后面写js的时候能够很好的获取和更改


发表于 2020-02-14 23:58:54 回复(0)
data-* 属性 允许我们在标准内于HTML元素中存储额外的信息,而不需要使用类似于   classList ,标准外属性,data-常用来设置一些自定义属性,存放一些数据信息,方便JavaScript的处理等。
发表于 2017-03-22 23:44:11 回复(0)