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

[问答题]

`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)

努力努力再努力+1

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)