欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS类的操作

程序员文章站 2022-05-29 08:13:28
CSS类的操作 ~~~javascript 点击按钮以后修改box的样式 点击按钮以后删除box的样式 ~~~ ......

css类的操作

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .b1 {
                width: 100px;
                height: 100px;
                background-color: skyblue;
            }

            .b2 {
                /* width: 200px; */
                height: 200px;
                background-color: aquamarine;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                // 获取box
                var box = document.getelementbyid("box");
                // 获取btn01
                var btn01 = document.getelementbyid("btn01");
                // 获取btn02
                var btn02 = document.getelementbyid("btn02");
                // 为btn01绑定单击响应函数
                btn01.onclick = function() {
                    // 修改box的样式
                    /*
                    通过style属性来修改元素的样式,没修改一个样式,浏览器就需要重新渲染一次页面
                      这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不方便
                    */
                    // box.style.width="200px";
                    // box.style.height="200px";
                    // box.style.backgroundcolor="yellow";


                    // 修改box的class属性
                    /*
                    我们可以通过修改元素的class属性来间接的修改样式
                    只需要一次,即可同时修改多个样式
                      浏览器只需要重新渲染页面一次,性能比较好
                      并且这种方式,可以使表现和行为进一步的分离
                    */
                    toggleclass(box,"b2");
                }
                btn02.onclick=function(){
                    removeclass(box,"b2");
                }
            };
            // 定义一个函数,用来向一个元素中添加指定的class属性值
            /*
             - 参数:
               obj:要添加class属性的元素
               cn:要添加的class值
            */
            function addclass(obj, cn) {
                // 检查obj中是否含有cn》
                if (!hasclass(obj, cn)) {
                    obj.classname += " " + cn;
                }

            }
            /*
            判断一个元素中是否含有指定的class属性值
             - 参数:
               obj:
               cn:
            */
            function hasclass(obj, cn) {
                // 判断obj中有没有cn class  
                // 创建一个正则表达式
                // var reg=/\bb2\b/;
                var reg = new regexp("\\b" + cn + "\\b");

                return reg.test(obj.classname);

            }
            // 删除一个元素中的指定的class属性
            function removeclass(obj, cn) {
                // 创建一个正则表达式
                var reg = new regexp("\\b" + cn + "\\b");

                // 删除class
                obj.classname = obj.classname.replace(reg, "");
            }
            /*
            toggleclass可以用来切换一个类
              - 如果元素中具有该类,则删除
              - 如果元素中没有该类,则添加
            */
            function toggleclass(obj,cn){
                // 判断obj中是否含有cn
                if(hasclass(obj,cn)){
                    // 有,则删除
                    removeclass(obj,cn);
                }else{
                    addclass(obj,cn);
                }
            }
        </script>
    </head>
    <body>
        <button id="btn01">点击按钮以后修改box的样式</button><br><br>
        <button id="btn02">点击按钮以后删除box的样式</button><br><br>
        <div id="box" class="b1"></div>
    </body>
</html>