html data 协议,HTML5 data-xxx 属性

数据应与特定的元素相关联，但不需要任何定义。

data-xxx 可以在HTML元素内存储额外的信息。

使用规则

本质：一个保存数据的自定义属性

用法： data-作为前缀，后面跟着描述性的单词(只允许小写字母和连字符-)

一个元素可以有任意多个data属性

属性值不能是对象类型。

dataset API的要求：>IE10

HTML 语法

id="foods"

data-name="apple"

data-sum-num="10"

data-paret="fruit"

>

JavaScript获取方式

getAttribute()

dataset()

var article = document.querySelector("#foods");

// 一般方式读取和修改值

article.getAttribute("data-name");

article.setAttribute("data-name","orange");

// dataset API读取属性值

article.dataset.name // 获取name值

article.dataset.sumNum

article.dataset.parent

// dataset API设置属性值

article.dataset.name = "banana" // 将名称设置为banana

jQuery获取方式

$("#foods").attr("data-name")

$("#foods").data("name")

$("#foods").data("sumNum")

$("#foods").data("parent")

CSS获取方式

// 获取值

article::before{

content: attr(data-name);

}

// 改变值

article[data-name="apple"]{

width="100px;"

}

article[data-name="banana"]{

width="100px;"

}