文章目录
改变某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>
.b1{
width:100px;
height:100px;
background-color: coral;
}
.b2{
width:200px;
background-color:darkseagreen;
}
.b3{