* 通过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>
效果前：
效果后：
好啦，先休息一下，希望可以将零碎的知识点整理出来。