js操作元素练习题目（用户名的隐藏，开关灯效果，下拉菜单）

最新推荐文章于 2024-07-08 16:22:29 发布

11路的卷尺

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量81

点赞数

分类专栏：基础练习文章标签： javascript html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_72711350/article/details/128620333

版权

基础练习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

开关灯效果，

注意点：

flag=1或者0区分两种对立的情况一种是关闭，另一种是打开

修改元素的样式属性通过element.style.属性名，这里属性名记得驼峰命名法

<!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: 100%;
            height: 1200px;
            background-color: #fff;
        }
    </style>
</head>

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

</html>

用户名的隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            display: block;
            border: 13px solid rgb(134, 6, 55);
            margin: 10px auto;
            color: rgb(201, 118, 9);
        }
        .change {
            border: 5px solid rgb(19, 226, 64);
            color: #971493;
        }
    </style>
</head>
<body>
    <input type="text" value="邮箱" class="ipt">
    <input type="text" value="密码" class="psd">
    <script>
        // 获取元素
        var ipt = document.querySelector('.ipt');
        var psd = document.querySelector('.psd');
        // 注册事件，处理程序:获得焦点时：1没有输入信息，让文本框为空，改变文本框颜色，，2，输入信息时，用change， 失去焦点时：1没有输入信息，变为邮箱，不改变颜色2输入信息时，颜色变为黑色
        ipt.onfocus = function () {
            if (this.value !== '邮箱') {
                this.className = 'change';
            } else {
                this.value = '';
                this.className = 'change';
            }
        }
        ipt.onblur = function () {
            if (this.value === '') {
                this.value = '邮箱';
                this.className = 'ipt';
            } else {
                this.className = 'ipt';
                this.style.color = 'black';
            }
        }
        psd.onfocus = function () {
            if (this.value !== '密码') {
                this.className = 'change';
            } else {
                this.value = '';
                this.className = 'change';
            }
        }
        psd.onblur = function () {
            if (this.value === '') {
                this.value = '密码';
                this.className = 'psd';
            } else {
                this.className = 'psd';
                this.style.color = 'black';
            }
        }
    </script>
</body>

</html>

注意：

通过className修改多种样式属性

逻辑顺序

下拉菜单

<!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>
        button {
            position: relative;
            margin: 10px 20px;
            width: 100px;
        }
        ul {
            position: absolute;
            top: 42px;
            left: 29px;
            visibility: hidden;
            list-style-type: none;
            background-color: rgb(203, 60, 60);
            width: 100px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- 下拉菜单 -->
    <button>网站导航 </button>
    <ul>
        <li>行业频道</li>
        <li>生活服务</li>
        <li>更多信息</li>
    </ul>
    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        // 注册事件，处理程序,当经过button时，ul出现
        btn.onmouseover = function () {
                ul.style.visibility = 'visible';
        }
       btn.onmouseout = function () {
                ul.style.visibility = 'hidden';
            }
    </script>
</body>

</html>

注意：