前端开发——DOM学习部分（二）

Luck&wisdom

已于 2022-12-15 18:36:04 修改

阅读量244

点赞数 11

分类专栏：前端文章标签：学习前端

于 2022-12-15 18:30:47 首次发布

本文链接：https://blog.csdn.net/2201_75835294/article/details/128333105

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

这一篇博客我将为大家继续学习前端中DOM部分，这一篇我将讲解两个案例，大家可以收藏，以后在前端开发中可以直接套用学习。

知识点部分

1.百度换肤

界面效果：

代码实现：

<!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></title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: url(./images/1.jpg) no-repeat center top;
    }
    li{
        list-style: none;
    }
    .baidu{
        overflow: hidden;
        margin: 100px auto;
        background-color: #fff;
        width: 410px;
        /* height: 70px; */
        padding-top: 3px;
    }
    .baidu li{
        float: left;
        margin: 0 1px;
        width: 100px;
        cursor: pointer;
    }
    .baidu img{
        width: 100px;
    }
</style>
<body>
    <ul class="baidu">
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
    </ul>
    <script>
        var imgs=document.querySelector('.baidu').querySelectorAll('img');
        for(var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                document.body.style.backgroundImage='url('+this.src+')';
            }
        }
    </script>
</body>
</html>

2.表格隔行变色效果

界面效果

说明一下：这个表格隔行变色效果，当你鼠标经过tbody某一行时，该行的背景颜色会发生改变。

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>