A-A+

操作 data-* 属性

2016年05月06日 JavaScript 暂无评论 阅读 90 次
操作 data-* 属性
<div id="test" data-age="24">        Click Here    </div>
var test = document.getElementById('test');
console.log(test.getAttribute('data-age')); //24
console.log(test.dateset.age); //24
test.dataset.my = 'Byron';     //设置
test.setAttribute('age', 25);    //设置
- <div id="user" data-id="1234567890" data-name="愚人码头" data-date-of-birth>码头</div>
- <script type="text/javascript">
- var el = document.querySelector('#user');
- console.log(el.id); // 'user'
- console.log(el.dataset);//一个DOMStringMap
- console.log(el.dataset.id); // '1234567890'
- console.log(el.dataset.name); // '愚人码头'
- console.log(el.dataset.dateOfBirth); // ''
- el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值.
- console.log('someDataAttr' in el.dataset);//false
- el.dataset.someDataAttr = 'mydata';
- console.log('someDataAttr' in el.dataset);//true
- </script>

关于data-属性选择器

在实际开发时,您可能会发现它很有用,你可以根据自定义的 data- 属性选择相关的元素。例如使用querySelectorAll选择元素:


  1. // 选择所有包含 'data-flowering' 属性的元素
  2. document . querySelectorAll ( '[data-flowering]' ) ;
  3. // 选择所有包含 'data-text-colour' 属性值为red的元素
  4. document . querySelectorAll ( '[data-text-colour="red"]' ) ;
同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式,例如下面这个例子:

关于data-属性选择器

在实际开发时,您可能会发现它很有用,你可以根据自定义的 data- 属性选择相关的元素。例如使用querySelectorAll选择元素:


  1. // 选择所有包含 'data-flowering' 属性的元素
  2. document . querySelectorAll ( '[data-flowering]' ) ;
  3. // 选择所有包含 'data-text-colour' 属性值为red的元素
  4. document . querySelectorAll ( '[data-text-colour="red"]' ) ;

同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式,例如下面这个例子:


<style type ="text/css">
.user {
width : 256px ;
height : 200px ;
}
.user[data-name='feiwen'] {
color : brown
}
.user[data-name='css'] {
color : red
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen" > 1 </div>
<div class = "user" data-id = "124" data-name = "css" > 码头 </div>

可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在jQuery1.4.3版本后出现的,它能返回相应的data属性。

举个例子,你可以用下面的写法读取 data-myid属性值:

 var myid= jQuery("#awesome").data('myid');
console.log(myid);

你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html:

<div id="awesome-json" data-awesome='{"game":"on"}'></div>

你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:

var gameStatus= jQuery("#awesome-json").data('awesome').game;
console.log(gameStatus);

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。

译者补充:尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录