js操作样式类——JS

_洋

已于 2023-01-11 17:51:38 修改

阅读量420

点赞数

分类专栏： JavaScript 文章标签： js

于 2022-04-09 10:39:31 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124056348

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

通过JS修改CSS的常用方法是：对象.style.属性 = “属性值”
如：

         box.style.width = "200px";
            box.style.height = "200px";
            box.style.backgroundColor ="red";

这样做的缺点：
通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。
所以可以直接修改box的class属性，从而间接地修改样式
优点：修改一次就可以修改多个样式
eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        
        .b1{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
        .b2{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
        window.onload =function(){
            var box = document.getElementById("box");
            var btn1 = document.getElementById("btn1");
           btn1.onclick = function(){

            /*
            通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
            */
            // box.style.width = "200px";
            // box.style.height = "200px";
            // box.style.backgroundColor ="red";

            /* 所以可以直接修改box的class属性，从而间接地修改样式
            优点：修改一次就可以修改多个样式
            */
            box.className += " b2";
            }


        }
    </script>

</head>
<body>
    <button id = "btn1">点击按钮修改box</button>
    <br>
    <br>

    <div id="box" class="b1"></div>
</body>
</html>

封装成函数：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      .b1 {
        width: 100px;
        height: 100px;
        background-color: tomato;
      }
      .b2 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
    <script>
      window.onload = function () {
        var box = document.getElementById("box");
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        btn1.onclick = function () {
          addClass(box, "b2");
        };
        btn2.onclick = function () {
          deleteClass(box, "b2");
        };
        btn3.onclick = function () {
          toggleClass(box, "b2");
        };
      };
      function addClass(obj, cn) {
        //   没有改属性才添加
        if (!hasClass(box, "b2")) {
          obj.className += " " + cn;
        }
      }
      function deleteClass(obj, cn) {
        //创建正则表达式进行查找删除
        var reg = new RegExp("\\b" + cn + "\\b");
        obj.className = obj.className.replace(reg, "");
      }

      /*
      toggleclass可以用来切换一个类
      如果元素中具有该类,则删除
      如果元素中没有该类，则添加*/
      function toggleClass(obj, cn) {
        if (hasClass(obj, cn)) {
          deleteClass(obj, cn);
        } else {
          addClass(obj, cn);
        }
      }

      // 判断一个元素中是否含有指定的class属性值
      // 如果有该class，则返回true，没有则返回falsel
      function hasClass(obj, cn) {
        // 使用正则表达式判断
        // var reg=/\bb2\b/;
        // 使用new可以传递变量
        var reg = new RegExp("\\b" + cn + "\\b");
        return reg.test(obj.className);
      }
    </script>
  </head>
  <body>
    <button id="btn1">点击按钮添加b2</button>
    <br />
    <br />
    <button id="btn2">点击按钮删除b2</button>
    <br />
    <br />
    <button id="btn3">点击切换类</button>
    <br />
    <br />

    <div id="box" class="b1"></div>
  </body>
</html>

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作样式类——JS

通过JS修改CSS的常用方法是：对象.style.属性 = “属性值”如： box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor ="red";这样做的缺点：通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。所以可以直接修
复制链接

扫一扫