DOM操作CSS样式
目录1. 操作样式
-
可以通过JS修改元素的内联样式
语法:
元素.style.样式名 = 样式值
注意:
- 如果样式名中含有
-
,由于这种名称在JS中不合法,需要修改成驼峰命名法。比如background-color → backgroundColor
- 此方法修改的是内联样式,具有较高的优先级,但如果原样式中有
!important
则会导致修改样式失效 - 通过style属性设置和读取的都是内联样式,无法读取样式表中的样式
//修改box1的背景颜色为黄色 box1.style.backgroundColor = "yellow"; //读取box1中的内联样式,如果没有内联样式则返回null alert(box1.style.width);
- 如果样式名中含有
2. 获取当前样式
-
getComputedStyle()
这个方法可以获取元素当前的样式,该方法会返回一个对象,对象中封装了当前元素对应的样式。如果获取的样式没有被设置过,则会获取到其真实值,而非默认值。该方法是只读的语法:
getComputedStyle([要获取样式的元素],[可以传递一个伪元素,一般为null])
alert(getComputedStyle(box1,null).width);
3. 其它样式相关属性
-
clientWidth & clientHeight
获取元素的可见宽度和高度,括内容区和内边距
这些属性都返回一个不带单位的数字且为只读形式,不能修改
-
offsetWidth & offsetHeight
获取整个元素的宽度和高度,包括内容区,内边距和边框
-
offsetParent
可以用来获取当前元素的定位父元素
会寻找离当前元素最近的,开启了定位的祖先元素。如果所有的祖先元素都没有开启定位,则返回body
-
offsetLeft & offsetTop
获取当前元素相对于其定位父元素的水平和垂直偏移量
-
scrollWidth & scrollHeight
可以获取元素整个滚动区域的宽度和高度
-
scrollLeft & scrollTop
可以获取垂直滚动条滚动的距离
-
当满足
scrollHeight - scollTop == clientHeight
说明垂直滚动条到底了当满足
scrollWidth - scrollLeft == clientWidth
说明水平滚动条到底了