Web API介绍及DOM对象（二）

最新推荐文章于 2024-06-15 21:20:00 发布

啵啵丶

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量97

点赞数 1

分类专栏： JavaScript 文章标签： html css

本文链接：https://blog.csdn.net/m0_53620413/article/details/120269179

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

5.案例：表格隔行变色（通过改变 this.className的值来获取样式）

6. 排他思想按钮案例

7.tab栏切换案例（设置属性、获取属性用法）

一、排他思想以及获取、设置、移除属性

1.排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式

2. 给当前元素设置样式

（后面会有案例练习）

2.获取属性的值

1. element.属性获取属性值

2. element.getAttribute('属性');

<div id="emo"  index="1"> </div>


//1. element.属性    获取属性值

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

console.log(div.id);
//------------------------------------------------------

//2. element.getAttribute('属性');

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

console.log(div.getAttribute('id'));

console.log(div.getAttribute('index'));

区别:
1. element.属性获取内置属性值(元素本身自带的属性)
2. element.getAttribute(属性");主要获得自定义的属性(标准) 我们程序员自定义的属性

3.设置属性的值

1. element.属性 = '值' 设置内置属性值

2. element.setAttribute('属性','值');

区别：
1. element.属性设置内置属性值
（若要更改 class的属性值，则会为 element.className = ' '）

2. element.setAttribute('属性',’值‘); 主要设置自定义的属性（标准） , 对于修改class的属性, 就是 class，不需要在后面加 Name

4.移除属性

element.removeAttribute('属性');

5.案例：表格隔行变色（通过改变 this.className的值来获取样式）

实现鼠标经过哪行哪行背景颜色就发生变化

 <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            width: 866px;
            margin: 100px auto;
        }

        table thead {
            height: 40px;
            background-color: #7fc8ed;
        }

        table tbody {
            color: #565ce6;
            font-size: 14px;
        }

        table tbody tr th {
            height: 40px;
            border-bottom: 1px solid #ccc;
            
        }

        .after {
            background-color: rgb(185, 223, 238);
        }
    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>003526</th>
                <th>农银金穗3个月定期开放债务</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>农银金穗3个月定期开放债务</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>农银金穗3个月定期开放债务</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>农银金穗3个月定期开放债务</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>农银金穗3个月定期开放债务</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
            <tr>
                <th>003526</th>
                <th>农银金穗3个月定期开放债务</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
            </tr>
        </tbody>
    </table>
    <script>
        var bod = document.querySelector('tbody').querySelectorAll('tr');
        for(var i = 0; i < bod.length; i++) {
            bod[i].onmouseover = function() {
                this.className = 'after';
            }
            bod[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

6. 排他思想按钮案例

实现点击哪个按钮哪个按钮的背景颜色就变成粉色，但其他的不变色

排他思想：当你点击了某个按钮之前先利用 for 循环把所有的按钮的背景颜色都变成空，循环结束后再把被点击按钮的背景颜色变为粉色

 <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for(var i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                for(  i = 0; i < btn.length; i++) {
                    btn[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

7.tab栏切换案例（设置属性、获取属性用法）

通过点击不同的标题显示不同的内容

  <title>Document</title>
    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 800px;
            margin: 100px auto;
        }
        
        ul {
            display: flex;
            height: 40px;
            align-items: center;
            border: 1px solid #e6e7e6;
            background-color: #eff0ef;
        }

        ul li {
            padding: 0 15px;
            height: 40px;
            line-height: 40px;
        }

        .current {
            background-color: #d72720;
            color: white;
        }

        ul li:hover {
            cursor: pointer;
        }
 
        .item {
            display: none;
        }

        .tbody {
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="head">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tbody">
            <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 li = document.querySelector('.head').querySelectorAll('li');
        var item = document.querySelector('.tbody').querySelectorAll('.item');
        for(var i = 0; i < li.length; i++) {
            li[i].setAttribute('data-index',i);
            li[i].onclick = function() {
                for(var i = 0; i < li.length; i++) {
                    li[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('data-index');
                for(var i = 0; i < item.length; i++) {
                    item[i].style.display = 'none';
                }
                item[index].style.display = 'block';
            }
        }
    </script>
</body>

啵啵丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Web API介绍及DOM对象（二）

目录一、排他思想以及获取、设置、移除属性1.排他思想2.获取属性的值3.设置属性的值4.移除属性5.案例：表格隔行变色（通过改变 this.className的值来获取样式）6. 排他思想按钮案例7.tab栏切换案例（设置属性、获取属性用法）一、排他思想以及获取、设置、移除属性1.排他思想如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：1. 所有元素全部清除样式2. 给当前元素设置样式（后面会有案例练习）...
复制链接

扫一扫