一、基本概念
在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
二、原生js中自定义属性
1,设置自定义属性
设置自定义属性有如下2种方式。
(1)第一种方式是可以直接在 HTML 标签上面书写:
<h2 data-weather="rain">今天天气很好</h2>
上面 data-weather 就是一个自定义属性,值为 rain。
在通过这个方式设置的时候需要注意的是,如果设置的自定义属性是多个单词的组合的话,需要用中横线(-)链接,比如:
<h2 data-birth-date="19940219">今天天气很好</h2>
(2)第二种方式是通过 js 的 dataset 属性来设置:
// html <h2>今天天气很好</h2> // js var h2 = document.querySelector('h2'); h2.dataset.weather = "rain";
这样也是设置了一个 data-weater 的自定义属性,值为 rain,HTML5 中元素都会有一个dataset的属性,这是一个 DOMStringMap 类型的键值对集合。
通过这种方式设置同样需要注意,如果设置的是多个单词的组合的话,需要使用驼峰命名法来书写:
// html <h2>今天天气很好</h2> // js var h2 = document.querySelector('h2'); h2.dataset.birthDate = "19940219";
2,js读取自定义属性
读取的时候通过dataset属性,使用”.”来获取自定义属性,需要去掉 data- 前缀,连字符需要转化为驼峰命名:
// html(设置) <h2 data-weather="rain" data-birth-date="19940219">今天天气很好</h2> // js(读取) var h2 = document.querySelector('h2'); console.log(h2.dataset.weather); // rain console.log(h2.dataset.birthDate); // 19940219
3、css读取自定义属性
也可以通过自定义属性来书写样式:
h3[data-birth-date="19940219"]{ color: red; }
结果如图: