JavaScript的自定义属性

自定义属性

获取属性值

element.属性 获取属性值

element.getAttribute('属性');

区别：

element.属性获取内置属性值（元素本身自带的属性）

element.getAttribute('属性'); 主要获得自定义的属性（标准）我们自定义的属性

设置属性值

element.属性 = ’ 值 ’ 设置内置属性值
element.setAttribute('属性'); 主要设置自定义的属性（标准）

移除属性

element.removeAttribute('属性');

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

设置H5自定义属性

H5规定自定义属性 data- 开头做为属性名并且赋值

获取H5自定义属性

1. 兼容性获取 element.getAttribute('data-index');
2. 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），下面的内容跟着切换

案例分析

1. tab栏切换有2个大的模块
2. tab栏的模块选项卡，点击某一个，当前这一个的底色是红色，其余不变（排他思想）修改类名的方式
3. 下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写到点击事件里面。
4. 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配
5. 核心思路：给上面的tab_list 里面的所有的小li 添加自定义属性，属性值从0开始编号
6. 当我们点击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>