通过JS的DOM操作网页的样式

一.JS操作元素内联样式

  • 语法: 元素.style.样式名 = 样式值;
  • 注意: 若CSS样式名中含有-, 例: background-color(即背景)
  •   这种名称在JS中不允许, 需要将其改为驼峰命名, 例: backgroundColor
  •   即, 去掉样式名中的-, 并将-后的字母改为大写.
  • 忘记的话, 可以查看W3School手册中的CSS样式

注意: 通过JSDOM操作元素的style属性读取或修改的样式都是内联样式, 不能读或改CSS的样式, 内联样式拥有较高的优先级, 所以通过JS修改的样式会立即执行.

  但是, 若在样式中写了 !important ,则此时样式会有最高的优先级, 无法用JS覆盖该样式. 所以尽量不要用 !important 声明样式.

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
29
30
31
32
33
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementsByClassName("box")[0];
var btn = document.getElementById("btn01");
btn.onclick = function(){
box.style.width = "300px";
box.style.height = "300px";
box.style.backgroundColor = "yellow";
};
};
</script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
/*
*若在red后加!important,
*JS不能通过style修改背景颜色
*/
background-color: red !important;
}
</style>
</head>
<body>
<button id="btn01">修改样式</button>
<div class="box">
</div>
</body>
</html>

二.读取元素的生效样式

  • 语法: 元素.currentStyle.样式名;
  • currentStyle只有IE和Opera支持, 通过currentStyle读取元素样式, 若改样式没有值, 则返回其默认值, 如: currentStyle.width 为auto
  • 别的浏览器(IE9+)可以用window的getComputeStyle方法
  •   该方法返回一个对象, 该对象封装了指定元素对应的样式
  •   参数: ①要获取样式的元素②可以传递一个伪元素, 一般传null
  •   通过该对象读取的样式没有值, 也会返回默认值, 但有点不一样, 它返回的为具体的值.

  注意: 通过currentStyle和getComputeStyle()方式只能读取元素的样式, 不能修改.要想修改样式, 必须使用style属性

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
29
30
31
32
33
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementsByClassName("box")[0];
var btn = document.getElementById("btn01");
btn.onclick = function() {
var css = window.getComputedStyle(box, null);
var w = css.width;//w为多少px
var h = css.height;
//正常浏览器的方式(IE8及一下):
var bgc = css.backgroundColor;//bgc为rgb值
alert("宽:" + w + ";高:" + h + ";背景色:" + bgc);
w = box.currentStyle.with;//w为auto
//IE浏览器的方式:
bgc = box.currentStyle.backgroundColor;//bgc为样式的值
};
};
</script>
<style type="text/css">
.box{
height: 100px;
}
</style>
</head>
<body>
<button id="btn01">显示样式值</button>
<div class="box">
</div>
</body>
</html>

三.getStyle()

  • 二中提到的获取元素样式的方式, currentStyle只支持IE, 而getComputedStyle()方式不支持IE8及一下.
  • 我们可以自己定义一个函数getStyle(), 用来获取指定元素的样式
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
29
30
31
32
<head>
<style type="text/css">
.box {
height: 100px;
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<button id="btn01">显示样式值</button>
<div class="box">
</div>
<script type="text/javascript">
function getStyle(obj, name) {
if(window.getComputedStyle) {
//一般浏览器调用
return getComputedStyle(obj, null)[name];
} else {
//IE8及一下时调用
return obj.currentStyle[name];
}
}
var box = document.getElementsByClassName("box")[0];
var btn = document.getElementById("btn01");
btn.onclick = function() {
var w = getStyle(box,"width");
var h = getStyle(box,"height");
var bgc = getStyle(box,"backgroundColor");
alert("宽:" + w + ";高:" + h + ";背景色:" + bgc);
};
</script>
</body>

四.其他样式相关属性

属性 描述
element.clientHeight 返回元素的可见高度
element.clientWidth 返回元素的可见宽度
element.offsetHeight 返回元素的高度
element.offsetWidth 返回元素的宽度
element.offsetParent 返回元素的偏移容器
element.offsetLeft 返回元素的水平偏移位置
element.offsetTop 返回元素的垂直偏移位置
element.scrollHeight 返回元素的整体高度
element.scrollWidth 返回元素的整体宽度
element.scrollLeft 返回元素左边缘与视图之间的距离
element.scrollTop 返回元素上边缘与视图之间的距离

clientHeight、clientWidth: 获取元素可见宽度、高度值(返回数字, 不包括px), 不能修改
可见高度和宽度指内容区和内边距(width/height+padding)

offsetHeight、offsetWidth: 获取元素整个的宽度、高度(可见+boder)

offsetParent: 获取当前元素的定位父元素, 即距当前元素最近的开启了定位的祖先元素, 若所有的祖先元素都没开启定位, 则返回body.

offsetLeft、offsetTop: 获取当前元素相对于定位父元素的偏移量

scrollHeight、scrollWidth: 获取元素整个滚动区域的高度、宽度

scrollLeft、scrollTop: 获取滚动条滚动的距离, 注意: chrome认为浏览器的滚动条是body的, 火狐等浏览器认为浏览器的滚动条是html的.

当scrollHeight - scrollTop == clientHeight时, 说明垂直滚动条已经滚动到底
当scrollWidth - scrollLeft == clientWidth时, 说明水平滚动条已经滚动到底


评论