HTML5中data-*自定义属性作用

data-*是HTML5新增的一个自定义数据属性功能，作为可以暂存数据使用。利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来 *** 作。

（1）通过dataset方法获取

注意：data-之后以连字符分割的多个单词组成的属性，获取时候需要使用驼峰风格。如例子中的font-size需要改成fontSize。

如果你想删掉一个data-属性:

（2）、使用getAttribute方法获取

2、、data-*属性选择器用法

可以根据自定义的data-属性选择相关的元素。例如使用querySelectAll选择元素，例如

同样的我们也可以通过 data- 属性值对应的元素设置CSS样式，如下

部分内容参考如下出处： https://zhuanlan.zhihu.com/p/94849216

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

如果你使用jQuery类库，那么你可以非常愉悦的使用jquery的data()方法存取data-*

自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险

主要的方法如下：

代码如下:

.data(

key,

value

)

.data(

obj

)

.data(

key

)

.data()

从jQuery

1.4.3起，

HTML

5

data-

属性

将自动被引用到jQuery的数据对象中。

例如HTML：

复制代码

代码如下:<div

data-role

=

"page"

data-last-value

=

"43"

data-hidden

=

"true"

data-options

=

'{"name":"John"}'

>

</div>

下面的

jQuery代码都是返回

true

的：

代码如下:

$

(

"div"

)

.

data

(

"role"

)

===

"page"

$

(

"div"

)

.

data

(

"lastValue"

)

===

43

$

(

"div"

)

.

data

(

"hidden"

)

===

true

$

(

"div"

)

.

data

(

"options"

)

.

name

===

"John"

和html5的api不同的是，jQuery会尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。如果这样做不会改变数值的表示，那么该值将转换为一个数字（number）。例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。

如果数据(data)属性是一个对象（以“{”开始）或数组（以'[‘开始），可以用jQuery.parseJSON

将其解析成字符串；它必须遵循

有效的JSON的语法

，包括带双引号的属性名称。如果该值不能解析为一个JavaScript值，它将被保留为字符串。

如果想将取出的属性值直接当作字符串的话，请使用

attr()

方法。

data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。

调用

.data()

时如果不带参数，将会以

JavaScript

对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的

.data(obj)

*** 作，将不会再影响这个对象。另外，直接 *** 作这个对象会比每次调用

.data()

来设置或获取值要快一些。

---