html5 data 属性

发表于

用于在元素上保存不需要展示的消息

语法

直接在标签上添加 ‘data-‘ 开头的属性

1
2
3
<div id='data' data-name='name' data-columns="3">
  
</div>

实用js直接可以获取着部分属性

1
2
3
4
5
6
var data = document.querySelector('#data');
// 读取值
data.dataset.name; // name
data.dataset.columns; // 3
// 改变值
data.dataset.columns = 5;

css访问, 以便控制样式

  1. 用attr(data- …)直接获取值 

    1
    2
    3
     article::before {  
       content: attr(data-parent);
    }

  2. 使用属性选择器

    1
    2
    3
    4
    5
    6
    article[data-columns='3'] {
      width: 400px;
    }
    article[data-columns='4'] {
      width: 600px;
    }

注意: data- 中保存的属性, 在爬虫时是无效的. ie11以上才支持dataset来获取值, 如果要兼容以下版本, 建议使用getAttribute(). 使用dataset会比使用getAttribute()读取数据来得慢