CRainyDay

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
//为元素的class属性添加一个值
function addClass(obj,cname){
if(!hasClass(obj,cname)){
obj.className += " "+cname;
}
}
//判断元素class属性是否有某个值
function hasClass(obj,cname){
//利用正则表达式检测
var reg = new RegExp("\\b"+cname+"\\b");
return reg.test(obj.className);
}
//删除元素class属性中的某个值
function removeClass(obj,cname){
//利用正则表达式替换为空串
var reg = new RegExp("\\b"+cname+"\\b");
obj.className = obj.className.replace(reg,"");
}
//替换元素class属性中的某个值(有则删除,无则添加)
function toggleClass(obj,cname){
if(hasClass(obj,cname)){
removeClass(obj,cname);
}else{
addClass(obj,cname);
}
}

 上一页

JS

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有