<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js对dom的class的操作</title>
<!-- dom对类属性的操作:
如果是js对style中某一个属性的修改,js每改变一次style属性 就得去重新渲染一次浏览器
我们可以使用css的class 让js执行一次换多个属性优化
-->
<style>
.box{
width: 200px;
height: 200px;
background-color:yellow;
margin-top:10px;
}
.box_add{
height: 400px;
background-color:red;
}
.
</style>
<script type="text/javascript">
window.onload=function(){
var change_box_add=document.getElementById("change_box_add");
var box=document.getElementById("box");
//cn是修改的类名
function add_class(obj,cn){//使用函数对添加class 的方法进行封装
//用正则表达式来测试他是否存在
//因为我们是可以增加不同的class类所以传进来的类名不一样 就不能把正则表达式写死就得用创建对象的方式把类名拼接进去
//用对象创建正则表达式需要注意转义字符
//我们要检测是class的属性存在那必须是单独的字符串 相当于 独立的单词 就需要用到 正则表达式的单词边界(\b)专门检测是否单独包含这个单词
let reg=new RegExp("\\b"+cn+"\\b");
if(!reg.test(obj.className)){
//对他进行一个小增强看他的class属性中是否有增加的类,有就不动他没有就增加
obj.className=obj.className+" "+cn;
}
}
change_box_add.onclick=function() {
add_class(box, "box_add");
}
//删除类名
var change_box_del=document.getElementById("change_box_del");
function del_class(obj,cn){
//与上面一样先判读他有没有需要删除的没有就不动有就删除
let reg=new RegExp("\\b"+cn+"\\b");
if(reg.test(obj.className)){//如果有就删除
obj.className =obj.className.replace(reg,"");
}
}
change_box_del.onclick=function(){
del_class(box,"box_add");
}
//修改类名
var change_box_modify=document.getElementById("change_box_modify");
function modify_class(obj,cn){
//切换类 如果有类中有box_add就删除 没有添加
let reg=new RegExp("\\b"+cn+"\\b");
if(reg.test(obj.className)){
obj.className =obj.className.replace(reg,"");
}else{
obj.className=obj.className+" "+cn;
}
}
change_box_modify.onclick=function(){
modify_class(box,"box_add");
}
}
</script>
</head>
<body>
<button id="change_box_add">改变下方盒子的class属性添加按钮</button> <button id="change_box_del">改变下方盒子的class属性删除按钮</button>
<button id="change_box_modify">改变下方盒子的class属性切换按钮</button>
<div id="box" class="box"></div>
</body>
</html>
js对dom的class的操作
最新推荐文章于 2023-01-06 08:25:26 发布