JavaScript-笔记18
2022/2/1 20:40:57
本文主要是介绍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); } }
这篇关于JavaScript-笔记18的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?