类样式的操作
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的错误