2020-11-04|操作元素修改element.style|element.className-优快云博客

本文链接：https://blog.youkuaiyun.com/wenwench/article/details/109485700

本文介绍了如何使用JavaScript操作元素的style属性来修改样式，包括改变元素的大小、颜色和位置。通过示例详细讲解了如何显示和隐藏元素，如淘宝二维码的隐藏显示效果。此外，还探讨了使用className修改元素类名来批量更改样式，以实现密码框格式验证的错误提示。文章最后给出了四个关于操作元素的作业练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作元素

4.4样式属性大小

我们；：可以通过js修改元素的大小，颜色和位置

使用element.style修改

element.style   //行内样式操作   适用于要修改的不多
        element.className  //类名样式操作  适用于要修改的样式很多的情况下

  <div>
        我是盒子
    </div>

div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

  //获取元素
        var div = document.querySelector('div');
        //注册事件，处理程序
        div.onclick = function() {
            //里面的属性采取驼峰命名法
            div.style.backgroundColor = 'purple';
            div.style.width = "250px";
        }

注意：如果通过js修改了style样式，产生的是行内样式，权重比css高

案例：淘宝点击关闭二维码

核心：利用样式的显示和隐藏完成，display.none隐藏元素 display.block显示元素

点击按钮，让二维码盒子隐藏起来即可

css部分修改样式 css样式很重要

 .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;
        }

html部分布局：

<div class="box">
        淘宝二维码
        <img src="erweima.jpg" alt="" class="erweima" id="1">
        <i class="close-btn">×</i>
    </div>

js部分：其实js部分只处理了事件，提取事件元素然后做出事件

 var btn = document.querySelector(".close-btn");
        var box = document.querySelector(".box");
        btn.onclick = function() {
            box.style.display = "none";
        }

最后成果：当点击错号的时候，淘宝二维码就会消失，当再刷新一次的之后，就会出现。

案例：循环精灵图

就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            margin: 50px;
            
        }
        
        #box a {
            display: block;
            width: 74px;
            height: 20px;
            border: 1px solid #ccc;
            color: black;
            font-size: 12px;
            text-decoration: none;
            text-align: center;
            border-top: none;
            padding-top: 54px;
            background-image: url(精灵图.png);
        }
        
        #box #zone {
            border-top: 1px solid #CCCCCC;
            background-position: -17px 4px;
            background-repeat: no-repeat;
        }
        
        #box #zone:hover {
            background-position: -17px -98px;
        }
        
        #box #mail {
            background-position: -12px -186px;
            background-repeat: no-repeat;
        }
        
        #box #mail:hover {
            background-position: -12px -286px;
        }
    </style>

    <body>
        <div id="box">
            <a href="#" id="zone">空间</a>
            <a href="#" id="mail">邮箱</a>
        </div>
    </body>

</html>

其实就是将所需要的东西集中在一张大图上，然后根据图片的背景位置来设置所需要的图片，缺点是牵一发而动全身。

因为所需要设置出来的是精准测量出来的。循环精灵图就是遍历精灵图

将精灵图设置为背景。

案例：显示隐藏文本的内容

案例分析：首先表单需要两个新事件，获得焦点onfocus,失去焦点onbur

如果获得焦点，判断表单里面的文字是否为默认文字，如果是默认文字，就清空表单

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div input {
            color: #999;
        }
    </style>

    <body>
        <div>
            <input type="text" value="手机">
        </div>
        <script>
            //获取元素
            var text = document.querySelector('input');
            //注册事件，获得焦点事件  onfocus
            text.onfocus = function() {
                    console.log('得到了焦点');
                    if (text.value === "手机") {
                        text.value = "";
                    }

                }
                //注册事件  失去了焦点事件  onblur
            text.onblur = function() {
                if (text.value === "") {
                    text.value = "手机";
                }

            }
        </script>
    </body>

</html>

重点：获得焦点onfocus 失去焦点onblur

使用样式类名操作：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
            width: 55px;
            height: 55px;
        }
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>

    <body>
        <div>
            我是文本
        </div>
        <script>
            var div = document.querySelector("div");
            div.onclick = function() { //如果样式比较少或者功能比较简单的情况下使用element.style比较简单
                this.className = "change"; //让当前元素的类名改成了change
            }
        </script>
    </body>

</html>

注意：1：如果样式修改比较多，可以采取操作类名方式来更改元素样式

2：class因为是个保留字，因此使用className来操作元素类名属性

3.className会直接更改元素的类名，会覆盖原先的类名

案例：密码框格式提示错误信息

1.首先判断的事件是失去焦点onblur

2.如果输入正确则提示正确的信息颜色为绿色，小图标变化

3.如果输入的不是6~16位，则提示错误信息为红色小图标变化

4.因为里面的样式变化较多，我们采取className修改样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(gantanhao.jpg) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
        }
        
        .right {
            color: green;
        }
    </style>


    <body>
        <div class="register">
            <input type="password" value="" class="ipt">
            <p class="message">请输入6~16位的密码</p>
        </div>
        <script>
            var ipt = document.querySelector(".ipt");
            var message = document.querySelector(".message");
            ipt.onblur = function() {
                if (ipt.value.length < 6 || ipt.value.length > 16) {
                    console.log("错误");
                    message.className = "message wrong";  //利用className来修改样式
                    message.innerHTML = "你输入的密码不正确";//修改p标签内的内容


                } else {
                    message.className = "message right";  //利用className来修改样式以及文字
                    message.innerHTML = "您输入的是正确的";  //修改p标签内的内容


                }
            }
        </script>

    </body>

</html>

(背景图片这一块写的不好）