JS样式操作技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42760876/article/details/108189657

JS类的操作

实现修改box样式

在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.b1 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<button id="btn1">点击修改box样式</button><br><br>
		<div id="box" class="b1">
			
		</div>
	</body>
</html>

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样执行的性能比较差，在修改多个样式时也不方便

<script type="text/javascript">
    window.onload = function() {
    //获取
        var btn1 = document.getElementById("btn1")
        var box = document.getElementById("box")
        btn1.onclick = function() {
            //修改box样式 
            box.style.width = "200px"
            box.style.height = "200px"
            box.style.backgroundColor = "yellow"
        }
    }
</script>

我们希望一行代码就可以同时修改多个样式

.b2 {
    width: 200px;
    height: 200px;
    background-color: yellow;
}

修改box的class属性

box.className = "b2"

我们可以通过修改元素的class属性来间接修改样式
这样只需要修改一次即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好

有时候我们不需要去掉b1属性，这时可以用加等（注意加个空格）

box.className += " b2"

定义一个函数 addClass()，向一个元素添加指定的class属性值

参数：

obj 要添加class属性的元素
cn 要添加的class值

function addClass(obj, cn) {
    if(!hasClass(obj, cn)) {
        obj.className += " " + cn;
    } 
}

//判断一个元素是否含有指定的class属性值
function hasClass(obj, cn) {
    //判断obj中有没有cn，有返回true
    var reg = new RegExp("\\b" + cn + "\\b"); //正则表达式边界
    return reg.text(obj.className);
}

删除一个元素的class属性值 removeClass()

把要删的属性名换成空字符串

function removeClass(obj, cn) {
    var reg = new RegExp("\\b" + cn + "\\b"); //正则表达式边界
    obj.className = obj.className.replace(reg, "");
}

切换一个类 toggleClass()

如果元素中具有该类则删除
如果元素中没有该类则添加

function toggleClass(obj, cn) {
    if(hasClass(obj, cn)) {
        //有则删
        removeClass(obj, cn);
    }else {
        //没则加
        addClass(obj, cn);
    }
}