CSS类的操作
程序员文章站
2022-05-29 08:13:28
CSS类的操作 ~~~javascript 点击按钮以后修改box的样式 点击按钮以后删除box的样式 ~~~ ......
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() {
// 获取box
var box = document.getelementbyid("box");
// 获取btn01
var btn01 = document.getelementbyid("btn01");
// 获取btn02
var 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");
// 删除class
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">点击按钮以后修改box的样式</button><br><br>
<button id="btn02">点击按钮以后删除box的样式</button><br><br>
<div id="box" class="b1"></div>
</body>
</html>
上一篇： JS表单验证源码（带错误提示及密码等级）