获取样式的方法

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)