获取元素属性

在JS中，获取元素属性分为获取元素自定义属性和内置属性。

获取内置属性：ele.属性   （ele为元素对象）

获取自定义属性：ele.getAttribute(‘属性’)

设置和移除自定义属性

设置属性：setAttribute(属性名，属性值)

移除属性：removeAttribute(”属性)

    <a href="javascript:;"></a>

    <script>
        var a = document.querySelector('a');
        //获取内置属性
        console.log(a.href); //javascript:;
        //给a标签设置自定义属性
        a.setAttribute('myAttri',1);
        //获取自定义属性
        console.log(a.getAttribute('myAttri'));//输出 1
        console.log(a.myAttri);//undefined 此方式找不到
        //移除属性
        a.removeAttribute('myAttri');
        console.log(a.getAttribute('myAttri')); //null

    </script>

总结：要是标签自带的属性，使用原先的方式，要是自定义属性，推荐使用新的方式。

H5自定义属性说明

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

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

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，可读性差，所有，在H5中设置了新的规范。

 1.设置H5自定义属性

H5规定自定义属性以 ‘ data- ‘开头做为属性名并且赋值。(直接在标签中声明)

例如<a href = ‘javascript:;’  data-index = ‘1’></a> 

2.获取H5自定义属性

①兼容性获取：ele.getAttribute(‘data-自定义属性名‘);

②H5新增ele.dataset.自定义属性名 或ele.dataset[‘自定义属性名‘]

<div data-name="Tom"></div>
<script>
var div = document.querySelector('div');

//H5新增方式获取元素
console.log(div.dataset.name);
console.log(div.dataset['name']);

</script>

案例：tab栏切换 

案例说明：如图，点击上方菜单栏，下方显示对应模块内容。

代码实现（使用自定义属性）

 HTML代码

    <div id="fater">
        <div class="title_list">
            <ul>
                <li class="bkcl">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(数量)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="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>

CSS代码

<style>
    
    ul{
        list-style: none;
        overflow: hidden;
        background-color: bisque;
        height: 50px;
        margin: 0 auto;
        width: 710px;
    }
    ul li{
        padding: 15px;
        font-size: 20px;
        float: left;
        display: block;
         height: inherit; /*继承父类高度*/
    }

    #fater{
        border: solid rebeccapurple;
        width: 750px;
        margin: 0 auto;
        margin-top: 200px;
    }
    .con{
        padding-left: 70px;
        margin-top: 20px;
    }
    .item{
        display: none;
    }
    .bkcl{
        background-color: red;
    }
</style>

JavaScript代码

<script>
        var title_list = document.querySelector('.title_list');
        var lis = title_list.querySelectorAll('li');
        var con = document.querySelector('.con');
        var item = document.querySelectorAll('.item');
           
        for(var i = 0 ; i < lis.length ; i++ ){
                lis[i].setAttribute('index',i);//给每一个菜单按钮设置属性

                // console.log(lis[i].getAttribute);

                lis[i].onclick = function(){
                    for(var i = 0 ; i < lis.length;i++){
                        lis[i].className = ''; //全部去除背景
                    }
                this.className = 'bkcl';    //添加当前点击的背景

                var index = this.getAttribute('index');
                for(var j  = 0 ; j < item.length ; j++){
                    item[j].style.display = 'none';   //全部隐藏
                }
                item[index].style.display = 'block';  //对应菜单栏的文本显示
            }
            
        }

    </script>