JavaScript-笔记18

一、类的操作

通过style属性来修改元素的样式，每修改一个样式，浏览器就要重新渲染一次页面，这样执行的性能是比较差的，而且以这种方式在需要修改多个样式时，也不太方便

希望一行代码可以同时修改多个样式：

可以通过修改元素的class属性来间接地修改样式，这样只需修改一次即可修改多个样式，此时浏览器只需重新渲染页面一次，且该方式使表现（css）和行为（js）进一步分离

1. 修改样式（class从 "b1" 变为 "b2"）

box.className = "b2";

2. 增加样式（class从 "b1" 变为 "b1 b2"）

box.className += " b2";

* 注意空格

        // 定义一个函数用来向元素中添加指定的class属性值
        // 参数:
        // obj 要添加class属性的元素
        // cn 要添加的class值
        function addClass(obj, cn) {
            // 先检查obj中是否含有cn
            if (!hasClass(obj, cn)) {
                obj.className += " " + cn;
            }
        }

        // 定义一个函数用于判断一个元素中是否含有指定的class属性值
        function hasClass(obj, cn) {
            // 判断obj中有没有cn这个类
            var reg = new RegExp("\\b" + cn + "\\b");
            return reg.test(obj.className);
        }

        // 定义一个函数用于删除一个元素中指定的class属性值
        function removeClass(obj, cn) {
            var reg = new RegExp("\\b" + cn + "\\b");
            // 删除,不用判断,没有就删不掉
            obj.className = obj.className.replace(reg, "");
        }

        // 定义一个函数用于切换元素中的一个类,如果元素中有该类则删除,没有则添加
        function toggleClass(obj, cn) {
            // 判断obj中是否有cn
            if (hasClass(obj, cn)) {
                removeClass(obj, cn);
            } else {
                addClass(obj, cn);
            }
        }