DOM对CSS的操作
读取内联样式:
- 语法:元素.style.样式名
元素.style.width
元素.style.height
- 注意:如果样式名中带有-,则需要将样式名修改为驼峰命名法,将-去掉,然后-后的字母改大写
background-color --> backgroundColor
border-width ---> borderWidth
- 通过style属性设置和读取的都是内联样式,无法读取样式表中的样式。
修改内联样式:
- 语法:元素.style.样式名 = 样式值
- 通过style修改的样式都是内联样式,由于内联样式的优先级比较高,
所以我们通过JS来修改的样式,往往会立即生效,但是如果样式中设置了!important,则内联样式将不会生效。
读取元素的当前样式
IE浏览器
- 语法:元素.currentStyle.样式名
- 用来读取当前元素正在显示的样式,如果当前元素没有设置该样式,则获取它的默认值。
- currentStyle只有IE浏览器支持。
box.currentStyle["width"]
box.currentStyle.width
- 通过这个属性读取到的样式是只读的不能修改,如果要修改必须使用style属性。
其他浏览器
getComputedStyle()
- 这个方法是window对象的方法,会返回一个对象,这个对象中封装了当前元素生效的样式。可以通过对象.样式名来读取样式,如果获取的样式没有设置,则会获取到真实的值,而不是默认值。比如:没有设置width,它不会获取到auto,而是一个长度。
- 参数:
- 要获取样式的元素
- 可以传递一个伪元素,一般传null
getComputedStyle(box , null)["width"];
getComputedStyle(box , null).width;
- 该方法不支持IE8及以下的浏览器
- 通过该方法读取到样式是只读的不能修改,如果要修改必须使用style属性。
- 兼容IE8和其他浏览器的方法
//定义一个函数,用来获取指定元素的当前的样式
//参数:obj要获取样式的元素 name样式名
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器
return getComputedStyle(obj,null)[name];
}else{
//ie8
return obj.currentStyle[name];
}
}
其他的样式相关的属性
注意:以下样式都是只读的
- clientHeight、clientWidth
这两个属性可以获取元素的可见高度和宽度,指元素的内容区和内边距的高度,返回的是一个数字(不带px),可以直接进行计算。 - offsetHeight、offfsetWidth
整个元素的高度和宽度,包括内容区、内边距、边框 - offsetParent
- 获取当前元素的定位父元素
- 指离当前元素最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则返回body
- offsetLeft、offsetTop
- 当前元素和其定位父元素之间的偏移量
- offsetLeft水平偏移量 offsetTop垂直偏移量
- scrollHeight、scrollWidth
- 获取元素整个滚动区域的高度和宽度
- scrollTop、scrollLeft
- 获取元素垂直和水平滚动条滚动的距离
- 判断滚动条是否滚动到底
垂直滚动条
scrollHeight - scrollTop = clientHeight
水平滚动条
scrollWidth - scrollLeft = clientWidth
补充:
- onscroll 事件会在元素的滚动条滚动时触发
- chrome认为浏览器的滚动条是body的,获取当前页面的滚动条纵坐标可以通过body.scrollTop来获取
- 火狐等浏览器认为滚动条是html的,获取当前页面的滚动条纵坐标可以通过documentElement.scrollTop