js基础_86、类css的操作
样式与行为混合
通过style属性来修改元素的样式，每修改一个样式 ，浏览器就需要重新渲染一次页面 这样的执行的性能是比较差的，而且这种形式当我们要 修改多个样式时，也不太方便。 而且，css是样式，js是行为，这样的操作就是行为和表现混合了，在开发中尽量少用。
解决思路
我们可以通过修改元素的class属性来间接修改样式，这样一来，我们只需要修改一次，即可以同时修改元素的多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步分离。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload=function(){
var btn1=document.getElementById("btn1");
var box1=document.getElementById("box1");
btn1.onclick=function(){
/*
* 通过style属性来修改元素的样式，每修改一个样式 ，浏览器就需要重新渲染一次页面
* 这样的执行的性能是比较差的，而且这种形式当我们要 修改多个样式时，也不太方便。
* 而且，css是样式，js是行为，这样的操作就是行为和表现混合了，在开发中尽量少用。
*/
//box1.style.width=200+"px";
//box1.style.backgroundColor="yellow";
//addClass(box1,"b2");
//removeClass(box1,"b2");
toggleClass(box1,"b2");
}
};
function addClass(obj,cn){
if(!hasClass(obj,cn)){
obj.className+=" "+cn;
}
}
function hasClass(obj,cn){
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,"");
}
/*toggleClass
* 可以用来切换一个类
* 如果该元素中具有该类，则删除
* 如果元素中没有该类名，则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn)){
//有，则删除
removeClass(obj,cn);
}else{
//没有则添加
addClass(obj,cn);
}
}
</script>
</head>
<body>
<button id="btn1">点击修改样式</button>
<br /><br />
<div id="box1" class="b1 b2"></div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构