自定义属性值

获取属性值的方法getAttribute()

获取属性的方式有二,

  1. 点运算符获取 Element.属性,例如 div.id
  2. 通过getAttribute 方法element.getAttribute('属性'), var attr=div.getAttribute('id');

自定义属性

方法一可以获取,属性都是本来就定义好的属性,但是自定义的属性无法这样获取和修改.当时很多时候,许多属性都是我们自定义的,所以我们得要 getAttribute获取的属性

这样子就获取了自定义的属性 myclass

    <div myclass="yxq">自定义属性,myclass</div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('myclass'));
    </script>

设置属性值 setAttribute()

使用的方法是:setAttribute('属性','更改的值) 注意更改的值如果是数字型,就不用带引号了。

移除属性值 removeAttribute

语法 removeAttribute('属性值')

案例 tab 栏切换

image-20210125193634888

    <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">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var items= document.querySelectorAll('.item');
        for(var i=0;i<lis.length;i++)
        {
            // 设置索引值 
            lis[i].setAttribute('index',i);
            lis[i].onclick=function (){
                for(var j=0;j<lis.length;j++)
                {
                    lis[j].className='';
                    items[j].style.display='none';
                }
                this.className='current';
                // 显示内容
                items[this.getAttribute('index')].style.display='block';
            }   
        }
    </script>

实现上述的切换操作,看到这个地方,我们操作的属性就是 displaydisplay:none

我们要实现的功能如下

  • 上面的选项卡,点击其中的一个 背景颜色变成红色,字体颜色,变为白色。(双重for循环,一个注册事件,一个初始化,排他思想)

    实现个功能,我们提前写好了一个类 ,叫current,只需要点击的时候改变className就好了。

  • 下面内容切换,这里我们就遇到了一个问题,我们怎么知道点击的是那个模块呢,判断 i是几来判断谁被点击了?,这样是不可以的,别忘了这一段代码在浏览器刷新的时候就加载好了,i的值都是5的,

    这个样我们就用到了自定义属性了,我们给不同的div提前定义好一个索引值 index

补充

在h5下规定了 ,自定义属性要这样规定 以要data-开头,比如

<div data-index="1">h5自定义属性</div>

在h5下,获取自定义属性的时候就十分简单了, 通过 dataset 获取

var index = document.querySelector('div').dataset.index;

dataset 是一个集合,存放了所有一data开头的属性 ,所以我们还可以这样获取。

Q.E.D.


努力学习的小菜鸟