通过JS读取修改元素的样式

  • 读取:元素.style.样式名

  • 修改:元素.style.样式名 = 样式值

  • 注意:

    如果CSS的样式名中含有-,这种名称在JS中是不合法的

    比如background-color

    需要将这种样式修改为驼峰命名法:去掉-,将-后的字母大写

  • 我们通过style属性设置的样式都是内联样式

    内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示

  • 但是如果在样式中写了!important,则此时样式会有最高的优先级

    即使通过JS也不能覆盖该样式,此时将导致JS修改样式失效

    所以尽量不要为样式添加!important

  • 通过style属性设置和读取的都是内联样式

    无法读取样式表中的样式

读取元素的当前显示样式

  • 元素.currentStyle.样式名

    只有IE支持!!!

  • getComputedStyle()这个方法可以获取当前样式,

    这个方法是window的方法,可以直接使用

    需要两个元素:

    • 第一个:要获取样式的元素
    • 第二个:可以传递一个伪元素,一般都传null

    该方法会返回一个对象,对象中封装了当前元素对应的样式

    可以通过对象.样式名来读取样式

    如果获取的样式没有设置,则会获取到真实的值,而不是默认值

    • 比如:没有设置width,它不会获取到auto,而是一个长度
    • getComputedStyle(box1,null).width
  • 通过currentStylegetComputedStyle()读取到的样式都是只读的

    要更改样式,只能通过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
34
35
36
37
38
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
}
</style>

<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "yellow";
};
//点击btn02,读取元素的样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
alert(getComputedStyle(box1,null).backgroundColor);
}
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<button id="btn02">点我一下2</button>
<br><br>
<div id="box1"></div>
</body>
</html>

clientWidth,clientHeight

  • 这两个属性可以获取元素的可见宽度和高度
  • 这两个属性都是不带px的,返回的都是一个数字,可以直接进行计算
  • 会获取元素的宽度和高度,包括内容区和内边距
  • 这些属性都是只读的,不能修改

offsetWidth,offsetHeight

  • 获取元素的整个宽度和高度,包括内容区,内边距和边框
  • 这两个属性都是不带px的,返回的都是一个数字,可以直接进行计算
  • 这些属性都是只读的,不能修改

offsetParent

  • 可以获取到当前元素的定位父元素
  • 会获取到离当前元素最近的开启了定位的祖先元素

offsetLeft,offsetTop

  • offsetLeft当前元素相对于其定位父元素的水平偏移量
  • offsetTop当前元素相对于其定位父元素的垂直偏移量

scrollWidth,scollHeight

  • 可以获取元素整个滚动区域的宽度和高度

scrollLeft,scrollTop

  • 可以获取水平滚动条,垂直滚动条滚动距离

重要结论

  • 当满足scrollHeight - scrollTop == clientHeight

    说明垂直滚动条滚到底了

  • 当满足scollWidth - scrollLeft == clientWidth

    说明水平滚动条滚到底了