获取样式的方法
getComputedStyle
- window对象的方法,接收两个参数(获取的对象,null)[attr]
- 返回获取的属性(只读)
- 格式: window.getComputedStyle(obj, null)[attr]
- 注意点: IE9以上可用
currentStyle
- 格式: obj.currentStyle[attr]
- 注意点: IE低版本浏览器可用
兼容性处理
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return window.getComputedStyle(obj, null)[attr];
}
}
offset家族
- 由于对象.style.属性只能获取到行内样式,offset家族可以获取到元素的CSS样式,offset家族获取到的是元素占用的宽度和高度,style获取到的是元素的属性
- CSS样式是指: 在style标签中设置的样式或者在单独CSS文件中设置的样式
offsetWidth和offsetHeight
- 占用空间 = width + border + paddding
offsetLeft和offsetTop
- 获取元素到第一个定位元素之间的偏移位
- 如果没有父元素是定位的, 那么就是获取到body的偏移位
- 注意点: offsetLeft和marginLeft不一样,marginLeft获取的是CSS的值
client家族
clientWidth和clientHeight
- clientWidth和clientHeight代表可是区域内容的宽度和高度
- clientWidth = width + padding
- clientHeight = height+ padding
clientLeft和clientTop
- clientLeft表示一个元素左边框的宽度
- clientTop表示一个元素上边框的宽度
scroll家族
- scrollHeight:
- 如果内容没有超过元素的范围, 那么就是元素的padding + height
- 如果内容超出了元素的范围, 那么就是padding + height + 超出的高度
- scrollTop:
- 获取被移出元素范围的距离(参考点不包括border)
网友评论