自定义属性
获取属性值
element.属性
获取属性值
element.getAttribute('属性');
区别:
element.属性
获取内置属性值(元素本身自带的属性)
element.getAttribute('属性');
主要获得自定义的属性(标准)我们自定义的属性
设置属性值
element.属性
= ’ 值 ’ 设置内置属性值
element.setAttribute('属性');
主要设置自定义的属性(标准)
移除属性
element.removeAttribute('属性');
H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
设置H5自定义属性
H5规定自定义属性 data- 开头做为属性名并且赋值
获取H5自定义属性
- 兼容性获取
element.getAttribute('data-index');
- H5新增
element.dataset.index
或者element.dataset['index']
ie11才开始支持
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
自定义属性的使用案例(tab栏)
案例介绍
当鼠标点击上面相应的选项卡(tab),下面的内容跟着切换
案例分析
- tab栏切换有2个大的模块
- tab栏的模块选项卡,点击某一个,当前这一个的底色是红色,其余不变(排他思想)修改类名的方式
- 下面的模块内容,会跟随上面的选项卡变化,所以下面模块变化写到点击事件里面。
- 规律:下面的模块显示内容和上面的选项卡一一对应,相匹配
- 核心思路:给上面的tab_list 里面的所有的小li 添加自定义属性,属性值从0开始编号
- 当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的内容显示,其余隐藏(排他思想)
<script>
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环,给选项卡绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡,当前这一个底色会是红色,其余不变(排他思想)
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>