CSS类的操作
标签：
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=http://www.mamicode.com/\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>CSS类的操作
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/39947.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")