<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<style type="text/css">
.box2{
width: 100px;
height: 100px;
background-color: salmon;
}
.box{
height: 50px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload=function () {
var box=document.getElementById("box");
var btn=document.getElementById("btn");
btn.onclick=function () {
addClass(box,"box2");
};
//添加元素
function addClass(obj,cn) {
if (!hasClass(obj,cn)){
obj.className+=" "+cn;
}
}
//检查是否有重复元素
function hasClass(obj,cn) {
//单词边界
//var reg=/\ba2\b/
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,"");
}
//toggleClassName切换一个类 有则删，无则添
function toggleClassName(obj,cn) {
if (hasClass(obj,cn)){
removeClass(obj,cn)
}else{
addClass(obj,cn);
}
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<div id="box" class="box"></div>
</body>
</html>
用js事件实现元素的添加删除修改
最新推荐文章于 2022-09-03 09:20:41 发布
7761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
