JS基础—类的相关操作
一.JS直接修改style属性
-
通过style属性来修改元素的样式, 每修改一个样式, 浏览器需要重新渲染一次页面
-
这样的话, 执行性能是比较差的, 而且当我们要修改很多样式时, 用这种方式也很不方便
-
过多的使用这种方法, 网页的行为与表现也很大程度上耦合了
-
而我们希望, 一行JS代码就可以同时修改多个样式.
-
这时我们可以准备两套(或多套)CSS样式, 当需要修改时, 直接用JS替换为另一套就可以了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box");
btn01.onclick = function(){
box.style.width = 200 + "px";
box.style.height = 200 + "px";
box.style.backgroundColor = "yellowgreen";
};
};
</script>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn01">修改样式</button>
<div id="box" class="b1"></div>
</body>
|
二.修改class属性
我们可以通过修改元素的class属性来间接修改样式, 这样一来, 我们只需一行代码, 就可同时修改多个样式, 浏览器也只需重新渲染一次, 性能提升, 这种方式也可使表现和行为进一步分离.
在开发的过程中, 能通过class属性修改样式, 尽量这样使用.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box");
btn01.onclick = function(){
box.className = "b2";
};
};
</script>
<style type="text/css">
.b1{
width: 100px;
height: 300px;
background-color: red;
}
.b2{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<button id="btn01">修改样式</button>
<div id="box" class="b1"></div>
</body>
|
三.操作元素的class属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function addClass(obj,cname){
if(!hasClass(obj,cname)){
obj.className += " "+cname;
}
}
function hasClass(obj,cname){
var reg = new RegExp("\\b"+cname+"\\b");
return reg.test(obj.className);
}
function removeClass(obj,cname){
var reg = new RegExp("\\b"+cname+"\\b");
obj.className = obj.className.replace(reg,"");
}
function toggleClass(obj,cname){
if(hasClass(obj,cname)){
removeClass(obj,cname);
}else{
addClass(obj,cname);
}
}
|
