JS点击隐藏显示通过设置类名的方式

最新推荐文章于 2024-09-06 11:32:45 发布

猿分&

最新推荐文章于 2024-09-06 11:32:45 发布

阅读量477

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/qq_52006379/article/details/126514420

版权

JavaScript DOM操作显示隐藏 CSS类事件处理

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript

38 篇文章 0 订阅

订阅专栏

<!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{
            width: 100px;
            height: 100px;
            background: red;
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
  </head>
  <body>
    <button id="btn">show/hide</button>
    <div id="box" class="box show hide">111</div>
    <script>
    //   box.classList.remove("box");
    const box=document.getElementById('box')
    const btn=document.getElementById('btn');

      /* 
      点击 隐藏显示 
      通过设置类名的方式
     */

        btn.onclick=function(){
            //获取box的类名
            const className=box.className
            console.log(className);
            console.log(typeof className)//string

            //判断类名
            if(className.includes('hide')){
                box.className=''
                box.classList.add('show');
                box.classList.add('box')
            }else{
                box.className=''
                box.classList.add('hide')
                box.classList.add('box')
            }
        }
    </script>
  </body>
</html>