dom操作元素总结

最新推荐文章于 2024-05-30 22:51:52 发布

码上游

最新推荐文章于 2024-05-30 22:51:52 发布

阅读量178

点赞数

分类专栏： web前端开发 -T 文章标签： vscode javascript

本文链接：https://blog.csdn.net/pakerder/article/details/124294622

版权

web前端开发 -T 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

作业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>
        input {
            color: #999;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <!-- 操作元素总结 -->
    <!-- 操作元素内容  操作常见元素属性  操作表单元素属性  操作元素样式属性 -->
    <!-- 元素内容 innerText innerHTML -->
    <!-- 常见元素属性  src href title alt等 -->
    <!-- 表单元素属性  type value disabled等 -->
    <!-- 元素样式属性  element.style  className -->
    <input type="text" value="邮箱或账号" class="ipt">
    <script>
        var inp = document.querySelector('input');
        inp.onfocus = function() {
            if (this.value === '邮箱或账号') {
                this.value = '';
            }
            this.style.color = '#333';
        }
        inp.onblur = function() {
            if (this.value === '') {
                this.value = '邮箱或账号';
            }
            this.style.color = '#999';
        }
    </script>
</body>

</html>

效果

--》-》

作业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>
</head>

<body>
    <button>开关灯</button>
    <script>
        var btn = document.querySelector('button');
        var flag = 0;
        btn.onclick = function() {
            if (flag == 0) {
                document.body.style.backgroundColor = 'pink';
                flag = 1;
            } else {
                document.body.style.backgroundColor = 'black';
                flag = 0;
            }
        }
    </script>
</body>

</html>

效果：

--》--》

作业3：下拉菜单

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            list-style: none;
            /* background-color: red; */
            /* width: 800px; */
        }
        
        #fold {
            margin: 100px auto;
            width: 85%;
        }
        
        #fold>li {
            float: left;
            width: 100px;
            text-align: center;
        }
        
        #fold>li>a {
            background-color: lightgray;
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            color: orange;
            text-decoration: none;
        }
        
        #fold>li>ul {
            display: none;
        }
        
        #fold>li>ul li:hover {
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <div id="container">
        <ul id="fold">
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>评论</li>
                    <li>店铺</li>
                    <li>发文</li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>评论</li>
                    <li>店铺</li>
                    <li>发文</li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>评论</li>
                    <li>店铺</li>
                    <li>发文</li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>评论</li>
                    <li>店铺</li>
                    <li>发文</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        //获取li元素对象
        var uls = document.querySelector('#fold');
        var lis = uls.children; //获取uls节点下面的所有子元素节点
        // console.log(lis);
        //循环给每个li注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

效果:

码上游

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
dom操作元素总结

作业1.显示..
复制链接

扫一扫