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() {// 获取boxvar box = document.getElementById("box");// 获取btn01var btn01 = document.getElementById("btn01");// 获取btn02var 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");// 删除classobj.className = obj.className.replace(reg, "");}/*toggleClass可以用来切换一个类 - 如果元素中具有该类,则删除 - 如果元素中没有该类,则添加*/function toggleClass(obj,cn){// 判断obj中是否含有cnif(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>
|
