【getAttribute】【setAttribute】【removeAttribute】【attr】【remove】自定义属性的应用 怎么设置自定义属性 怎么修改删除自定义属性

我们会在很多场景用到自定义属性。

自定义属性的作用： 

        有些属性没有必要保存在数据库中，设置成自定义属性更加方便存储

目录

我们会在很多场景用到自定义属性。

1. 原生javascript的自定义属性的操作方式

1.1【获取】getAttribute

1.2【设置】setAttribute

1.3 【删除】removeAttribute

1.4 H5的自定义属性的操作

2.jQuery编程中自定义属性的设置

2.1【设置自定义属性】

2.2【获取自定义属性】

2.3【删除自定义属性?】

2.4【设置H5的自定义属性】

2.5【获取其自定义属性】

2.6【修改其自定义属性】

 4. 应用：tab栏切换 

---

1. 原生javascript的自定义属性的操作方式

1.1【获取】getAttribute

// 也可获取非自定义属性
div.getAttribute('id');
// 获取自定义属性
div.getAttribute('index');

1.2【设置】setAttribute

// 设置自定义属性
div.setAttribute('index',i); // 比如说在for循环里

// 也可设置非自定义属性
div.setAttribute('id', 'father');
div.setAttribute('class', 'big');

1.3 【删除】removeAttribute

div.removeAttribute('index');

1.4 H5的自定义属性的操作

<div></div>

<script>
        var div = document.querySelector('div'); 
        div.setAttribute('data-index', 1); // 设置H5自定义属性
        console.log(div.getAttribute('data-index')); // 打印获取H5自定义属性
</script>

H5自定义属性，我们“约定俗成”，如果这个属性是自定义属性，就加一个data，比如data-time，data-index

 

2.jQuery编程中自定义属性的设置

2.1【设置自定义属性】

$('div').attr('index',i); // 设置自定义属性index为比如说是i

2.2【获取自定义属性】

$('div').attr('index');

2.3【删除自定义属性?】

$('div').remove('index');

2.4【设置H5的自定义属性】

<div data-index="1" class="box">

2.5【获取其自定义属性】

$(".box").attr("data-index");

2.6【修改其自定义属性】

$(".box").attr("data-index", 2);

PS: 如果无法判断一个属性是否是自定义属性，可以进行如下测试

例如判断getTime属性是否是自定义属性

var div = document.querySelector('div');
console.log(div.getTime); // undefined

结论：如果打印出来是undefined，不能直接用元素.属性名的方式获取元素，那么就是自定义属性，必须要用getAttribute来获取

应用案例：

 3. 应用：tab栏切换 

轮播图案例中，通常有几个轮播图片，就会生成几个，小圆点，所用的思想和下面的类似

HTML

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品</li>
                <li>规格</li>
                <li>售后</li>
                <li>商品（50000）</li>
                <li>手机</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品
            </div>
            <div class="item">
                规格
            </div>
            <div class="item">
                售后
            </div>
            <div class="item">
                商品
            </div>
            <div class="item">
                手机社区
            </div>

        </div>
</div>

CSS

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }

JS代码

 var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            // 1、 设置自定义属性
            lis[i].setAttribute('index', i);
            lis[i].addEventListener('click', function () {
                //  2、 获取自定义属性
                var index = this.getAttribute('index');
                // console.log(index);
                //  3、 排他思想，颜色的改变
                tab_list.querySelector('.current').classList.remove('current');
                this.classList.add('current');
                //  4. 排他思想，tab栏底部颜色的变化
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            })
}

备注：自定义属性在后面“前后端学习”里面的通过调用后台数据库的资源渲染到浏览器的页面，也很常见。

结尾：

学习id： 201903090124-17

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。