setAttibute()和getAttitude()不常用？一个小案例让你看到他们的妙处。

阿珍敲code

已于 2022-10-15 20:20:56 修改

阅读量311

点赞数 3

文章标签： css html javascript

于 2022-08-23 23:53:30 首次发布

本文链接：https://blog.csdn.net/dsadada23/article/details/126494906

版权

案列介绍

 这是一个导航栏切换选项卡的小案例，通过这个案例就能体现setAttibute()和getAttitude()美妙之处。

了解一下基本语法

getAttribute() 获取标签属性的值

 <a href="http://www.baidu.comm" id="zhi"></a>

 var zhi=document.getElementById('zhi');
 zhi.getAttribute('href');//获取到a标签href的值

setAttribute() 设置标签属性和属性值

 <h2 class="h2">标题1</h2>

 var h2=document.querySelector('h2');//获取元素
 h2.setAttribute('class','h3');//修改值
 h2.setAttribute('index','1');//新增加一个属性和值

setAttribute(‘属性名’，‘属性值’)，如果存在改属性(js原生属性)，覆盖他的属性值，如果不存在就新增一个属性。

removeAttribute() 删除属性

 var h2=document.querySelector('h2');//获取元素
 h2.setAttribute('class','h3');//修改值
 h2.setAttribute('index','1');//新增加一个属性和值
 h2.removeAttribute('index');//删除index属性

removeAttribute(‘属性名’)删除之后变为null，不赋值就变为undefined

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 清除默认样式 */
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul {
            /* 字体大小、宽高、背景色、水平居中和定位(父相子绝) */
            font-size: 14px;
            width: 595px;
            height: 42px;
            text-align: center;
            background-color: #ebebeb;
            margin: 0 auto;
            position: relative;
        }

        li {
            /* 每个选项的宽高、左浮动、字体加粗 */
            width: 85px;
            float: left;
            line-height: 42px;
            font-weight: 700;
        }

        .list_div {
            /* 宽高边框、定位(父相子绝) */
            width: 595px;
            height: 420px;
            border: 1px solid rgb(88, 85, 85);
            font-weight: 500;
            color: black;
            line-height: 18px;
            box-sizing: border-box;
            position: absolute;
            /* top的值为ul的高度,left的值为0 */
            top: 42px;
            left: 0px;
        }
        /* 导航栏的显示内容先不显示 */
        .container li>div {
            display: none;
        }

        /* js调用的样式，背景颜色和字体颜色 */
        .change {
            background: rgb(198, 24, 24);
            color: rgb(247, 247, 247);
        }
    </style>
</head>

<body>
    <!-- div的宽度默认100% -->
    <div class="container">
        <!-- ul的宽度595px，居中显示，导航栏一般都是用无序列表做的-->
        <ul class="ul">
            <li>首页
                <div class="list_div">这是首页内容--阿瓜老板噶萝卜干</div>
            </li>
            <li>前端
                <div class="list_div">这是前端内容-阿瓜老板噶萝卜干</div>
            </li>
            <li>后端
                <div class="list_div">这是后端内容-阿瓜老板噶萝卜干</div>
            </li>
            <li>软件测试
                <div class="list_div">这是软件测试内容-阿瓜老板噶萝卜干</div>
            </li>
            <li>云计算
                <div class="list_div">这是云计算内容-阿瓜老板噶萝卜干</div>
            </li>
            <li>Python
                <div class="list_div">这是Python内容-阿瓜老板噶萝卜干</div>
            </li>
            <li>联系我们
                <div class="list_div">这是联系我们内容-阿瓜老板噶萝卜干</div>
            </li>
        </ul>
    </div>
    <!-- div结束 -->
</body>
<script>
    // 获取所有的li元素保存到lis里面
    var lis = document.querySelectorAll("li");
     // 获取所有的li下的div元素保存到list_divs里面
    var list_divs = document.querySelectorAll('.list_div');

    for (var i = 0; i < lis.length; i++) {
        // setAttribute() 添加或修改标签的属性。
        // 为每个li添加一个index属性，属性值为i。
        lis[i].setAttribute('index', i);
        // 当点击第i个选项卡时触发事件
        lis[i].onclick = function () {
            for (var j = 0; j < lis.length; j++) {
                // 先把所有的li的样式设置为默认样式，排他性原理
                lis[j].className = "";
            }
            // 再改变当前点击(i)的样式。
            this.className = 'change';
            // 关键点 获取到当前点击的的属性值赋值给index
            var index = this.getAttribute('index');
            // 还是利用排他性原理显示内容
            for (var j = 0; j < list_divs.length; j++) {
                list_divs[j].style.display = "none";
            }
            list_divs[index].style.display = "block";
        }
    }
</script>
</html>