文章目录
改变某HTML元素样式，有多种方法，各有优缺。推荐方法二：通过添加或切换元素的类来改变其样式。
知识储备
1.正则表达式
双斜杠中，第一个为转义字符。
alert("\\b");
2.Syntax上需要注意的问题
box1.style.width = "200px";
box1.style.backgroundColor = "#bfa";
-
赋值时，右值有时要用引号圈起来；
-
在CSS样式表和内联样式中，形如“background-color"、”border-width"等用
-连接起来的样式属性名，在JavaScript中，词法规则变为驼峰，比如“backgroundColor"、“borderWidth”。否则回报语法错误（赋值中左值无效）：
-
赋值所用到的数字后要跟单位
px，并且数字连同px一起被圈在引号里。 否则会报语法错误：
3.属于多个类的情况下，样式的覆盖情况
<div id="box1" class="b1 b2"> </div>
表示既属于类b1，又属于类b2。按照排列顺序，靠后的类的CSS样式，会覆盖掉相对靠前的类中与之重合的CSS样式，比如width和background-color；但是不同的样式不会被覆盖掉，比如下图中的height
方法一：改变内联样式
- 优点：
- 不需要考虑兼容性；
- 代码量少；
- 缺点：
- 每执行一句
element.style.styleName = " ";，都会重新进行一次整个页面的渲染，在网络拥堵的情况下效果巨差，不符合异步更新策略。因此不推荐使用。
- 每执行一句
<style>
.b1{
width:100px;
height:100px;
background-color: coral;
}
.b2{
width:200px;
background-color:darkseagreen;
}
</style>
<body>
<div id = 'box1' class = 'b1'>
</div>
<br>
<button id="btn01">测试一下</button><br><br>
<script >
const btn01 = document.getElementById('btn01');
const box1 = document.getElementById('box1');
btn01.onclick = function(){
box1.style.width = "200px";
box1.style.backgroundColor = "#bfa";
};
</script >
</body>
方法二： classList属性配合add()、remove()、toggle()，添加或删除元素的类来改变其样式。
<style>
最低0.47元/天 解锁文章
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
