DOM对CSS的操作
读取和修改内联样式
使用style属性来操作元素的内联样式
读取内联样式:
语法:元素.style.样式名
例子:
元素.style.width
元素.style.height
注意:如果样式名中带有-,则需要将样式名修改为驼峰命名法
将-去掉,然后-后的字母改大写
比如:background-color --> backgroundColor
border-width ---> borderWidth
修改内联样式:
语法:元素.style.样式名 = 样式值
通过style修改的样式都是内联样式,由于内联样式的优先级比较高,
所以我们通过JS来修改的样式,往往会立即生效,
但是如果样式中设置了!important,则内联样式将不会生效。
读取元素的当前样式
正常浏览器
使用getComputedStyle()
这个方法是window对象的方法,可以返回一个对象
这个对象中保存着当前元素生效样式
参数:
1.要获取样式的元素
2.可以传递一个伪元素,一般传null
例子:
获取元素的宽度
getComputedStyle(box , null)["width"];
通过该方法读取到样式都是只读的不能修改
IE8
使用currentStyle
语法:
元素.currentStyle.样式名
例子:
box.currentStyle["width"]
通过这个属性读取到的样式是只读的不能修改
其他的样式相关的属性
注意:以下样式都是只读的
clientHeight
元素的可见高度,指元素的内容区和内边距的高度
clientWidth
元素的可见宽度,指元素的内容区和内边距的宽度
offsetHeight
整个元素的高度,包括内容区、内边距、边框
offfsetWidth
整个元素的宽度,包括内容区、内边距、边框
offsetParent
当前元素的定位父元素
离他最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则返回body
offsetLeft
offsetTop
当前元素和定位父元素之间的偏移量
offsetLeft水平偏移量 offsetTop垂直偏移量
scrollHeight
scrollWidth
获取元素滚动区域的高度和宽度
scrollTop
scrollLeft
获取元素垂直和水平滚动条滚动的距离
判断滚动条是否滚动到底
垂直滚动条
scrollHeight - scrollTop = clientHeight
水平滚动
scrollWidth - scrollLeft = clientWidth