当前位置：网站首页>dom操作元素 总结

dom操作元素 总结

2022-04-21 15:54:00 【贾继宝】

<!-- 操作元素总结 -->

<!-- 操作元素内容 操作常见元素属性 操作表单元素属性 操作元素样式属性 -->

<!-- 元素内容 innerText innerHTML -->

<!-- 常见元素属性 src href title alt等 -->

<!-- 表单元素属性 type value disabled等 -->

<!-- 元素样式属性  element.style  className -->

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

 效果:

 

 

 

版权声明
本文为[贾继宝]所创，转载请带上原文链接，感谢
https://blog.csdn.net/pakerder/article/details/124294622

边栏推荐

猜你喜欢

随机推荐