DOM操作元素案例

最新推荐文章于 2024-06-19 14:45:15 发布

FG.

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量273

点赞数 2

分类专栏： Web APIs 文章标签： javascript css html5

本文链接：https://blog.csdn.net/weixin_54418006/article/details/122445852

版权

Web APIs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="tb.png" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        //1.获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2.注册事件
        btn.onclick = function () {
            box.style.display = 'none';
        }
    </script>
</body>

</html>

在这里插入图片描述
点击x就可以使二维码隐藏起来

2. 循环精灵图

<!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>
        li {
            list-style: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(jlt.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //1.获取元素
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            //索引号乘以44就是每个li的背景y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

</html>

在这里插入图片描述

3. 显示隐藏文本框内容

<!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>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="FG">
    <script>
        //1.获取元素
        var text = document.querySelector('input');
        //2.注册事件
        text.onfocus = function () {
            //console.log('得到了焦点');
            if (this.value === 'FG') {
                this.value = '';
            }
            //获得焦点需要把文本框里的文字颜色变黑
            this.style.color = '#333';
        }
        text.onblur = function () {
            //console.log('失去了焦点');
            if (this.value === '') {
                this.value = 'FG';
            //失去焦点颜色变浅
            this.style.color = '#999';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述
点击文本框颜色变黑，点击外面则恢复

4. 密码框验证信息

<!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>
        div {
            width: 600px;
            height: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            padding-left: 20px;
        }

        .wrong {
            color: red;
        }

        .right {
            color: green;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        //1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2.注册事件 失去焦点
        ipt.onblur = function () {
            //根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                //console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

4. 百度换肤效果

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.HC5KIYPIjGVXI7RUf_fEZgHaEo?w=262&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7')no-repeat center top;
            background-size: 100%;
        }

        li {
            list-style: none;
        }

        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }

        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }

        .baidu img {
            width: 100px;
            height: 58px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.HC5KIYPIjGVXI7RUf_fEZgHaEo?w=262&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                alt=""></li>
        <li><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.CCMkE1B7kaWGMU1d_Db4mgHaEK?w=316&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                alt=""></li>
        <li><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Lx5ngcKxN_LiK7na2zdfbAHaFQ?w=259&h=184&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                alt=""></li>
        <li><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.vJKLktOxJ2PZ_cAnBaM7HgHaHa?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                alt=""></li>
    </ul>
    <script>
        //1。获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //2.循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                //把路径this.src给body
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

5. 表格隔行变色

<!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>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
        }
  
        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.获取元素
        var trs = document.querySelector('body').querySelectorAll('tr');
        //2.利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            //3.鼠标经过事件 onmouseover
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            //4.鼠标离开事件 onmouseout
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>
</body>

</html>

_se,x_16)

6. 表单全选取消全选案例

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font-size: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iphone13</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //1.获取元素
        var j_cbAlls = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        //2.注册事件
        j_cbAlls.onclick = function () {
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                //flag控制全选按钮是否选中
                var flag = true;
                //每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break;  //退出for循环 提高效率 
                    }
                }
                j_cbAlls.checked = flag;
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

FG.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM操作元素案例

仿淘宝二维码<!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"> <titl
复制链接

扫一扫