类样式的操作

Posted caicaihong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了类样式的操作相关的知识,希望对你有一定的参考价值。

  * 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
* 这样子的执行的性能是比较差的,而且这种形式当我们修改样多个样式时,也不太方便。
* 希望一行代码就可以修改多个样式
* 我们可以通过修改class的属性来间接的修改样式
* box.className = "b2";
* 这样一来,我们只需要修改一次,即可同时修改样式
* 浏览器只需要重新渲染页面一次,性能比较好,
* 并且这种方式,可以使表现和行为进一步的分离。

可以把增删的类写在一个方法里面,放在工具类,谁都可以调用:

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .b1{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            .b2{
                width: 200px;
                height: 300px;
                background-color: deeppink;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var box = document.getElementById("box");
                var btn01 = document.getElementById("btn01");
                //修改box样式
                /*
                 * 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
                 * 这样子的执行的性能是比较差的,而且这种形式当我们修改样多个样式时,也不太方便。
                 * 希望一行代码就可以修改多个样式
                 * 我们可以通过修改class的属性来间接的修改样式
                 * box.className = "b2";
                 * 这样一来,我们只需要修改一次,即可同时修改样式
                 * 浏览器只需要重新渲染页面一次,性能比较好,
                 * 并且这种方式,可以使表现和行为进一步的分离。
                 */
                //box.className = "b2";
                //如果使用类叠加的话,则使用
                //box.className += " b2" 
                btn01.onclick = function(){
                    //box.className += " b2" 
                    //addClass(box,"b2");
                    toggleClass(box,"b2")
                };
                
            };/*
               * 定义一个函数,用来向一个元素添加指定的class属性值
               * 参数
               * obj 要添加class属性的元素
               * cn 要添加的class值
               */
            function addClass(obj,cn){
                //检查obj中是否有cn
                if(!hasClass(obj,cn)){
                    obj.className += " "+cn 
                }
                
                
            };
            /*
             * 判断一个元素中是否含有指定的class属性值
             * 如果有该class,则返回true,没有则返回false
             * 判断obj中有没有cn class
             * 创建一个正则表达式
             */
            function hasClass(obj,cn){
                //由于要有变量,所以需要构造函数
                var reg = new RegExp("\\b"+cn+"\\b");
                
                return reg.test(obj.className)
            };
            function removeClass(obj,cn){
                var reg = new RegExp("\\b"+cn+"\\b");
                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">点击修改样式</button>
        <br />
        <div id="box" class="b1"></div>
    </body>
</html>

效果前:

技术分享图片

效果后:

技术分享图片

好啦,先休息一下,希望可以将零碎的知识点整理出来。

 








以上是关于类样式的操作的主要内容,如果未能解决你的问题,请参考以下文章

类样式的操作

工具栏作为片段中的操作栏

在“设置”片段中夸大类PreferenceScreen的错误

20194626 自动生成四则运算题第一版报告

在Android中,如何将数据从类传递到相应的布局/片段文件?

XSLT:无法将操作数转换为“结果树片段”