javascript的offset系列属性总结

offsetLeft和offsetTop属性

offsetLeft:就是这个元素左边框外,到自己的offsetParent对象的左边框内的距离。
offsetTop:就是这个元素上边框外,到自己的offsetParent对象的上边框内的距离。
offsetParent 表示自己的偏移参考盒子。

IE9,IE9+ chrome等高级浏览器下

offstParent(表示自己的偏移参考盒子)就是自己祖先元素中,离最近的已经定位的元素。如果自己的祖先元素中,没有任何元素进行了定位,offsetParent对象就是body.

无论元素自身是否定位,该元素的offsetLeft(offsetTop)就是自身到定位的祖先元素的距离值。

IE6,IE7浏览器

IE6,7下,元素本身没有定位属性,那么自己的offsetParent对象就是自己的祖先元素中离自己最近有宽度(width)和高度(height)属性或者有定位(position)属性的父辈(祖先)元素。(定位的元素优先级高于有宽高的父辈(祖先)元素)

IE6,7下,元素本身有定位属性,那么元素本身的offsetParent对象就是离自己最近的有定位的父辈(祖先)元素。

IE6,7下,offsetLeft(offsetTop)就是元素本身到左(上)外边框外到offsetParent对象的左(上)边框内的距离值。

IE8

IE8的offsetParent就是离自己最近的定位属性的祖先元素。

IE8的offsetLeft(offsetTop)的数组,会多算一条offsetParent的边框值(border).

兼容方法

元素本身有定位属性,offsetParent没有边框.(所有浏览器的offsetLeft(offsetTop)的数值一致).

offsetWidth和offsetHeight(全线兼容)

元素的 offsetWidth =width+左右padding+左右border
元素的 offsetHeight =height+上下padding+左右border

注意:如果元素没有宽度,那么所有浏览器都将把px值当做offsetWidth,而不是100%;
如果元素没有高度,用文字撑的高度,所有的浏览器都将把px值当做offsetHeight;
特别注意: IE6,7,8下,元素没有高度(文字撑开的),用currentStyle.height值是auto;

clientWidth和clientHeight(全线兼容)

clientWidth =width+左右padding
clientHeight =height+上下padding

注意:如果盒子没有宽度,那么所有的浏览器都将px值当做cleintWidth,而不是100%
如果盒子没有高度(用文字撑开的),IE6的clientHeight是0,其他浏览器都是数值。

补充:BOM相关复习

  • 滚动条位置获取
    • document.body.scrollTop || document.documentElement.scrollTop
    • document.body.scrollLeft || document.documentElement.scrollLeft
    • window.scrollX //高版本浏览器
    • window.scrollY //高版本浏览器
    • window.scrollTo(x,y) //设置滚动条
  • 获取尺寸 的相应方法
    • 获取可视区(浏览器窗口)尺寸
      • document.documentElement.clientWidth / document.documentElement.clientHeight(不包含滚动条)
      • window.innerWidth/window.innerHeight (包含滚动条)
    • 获取页面的尺寸
      • document.body.scrollWidth
      • /document.body.scrollHeight 浏览器内容的高度
    • 获取屏幕尺寸
      • window.screen.width
      • window.screen.height
    • 元素相关的尺寸
      • el.offsetWidth / el.offsetHeight 可视宽高(width/height+padding+border)
      • el.offsetLeft /el.offsetTop 元素距离最近的定位父级(组先级)的距离
      • el.clientWidth / el.clientHeight 元素宽高(width/height+padding)
      • el.clientLeft /el.clientTop 元素的左边框和上边框的数值
      • el.scrollWidth / el.scrollHeight 元素的内容宽高(如果元素内容宽/高小于元素高度时,则是元素的宽和高)
      • getBoundingClientRect() 高版本浏览器
        • width /height 可视宽高(width/height+padding+border)
        • top bottom 元素顶/底部距离可视区顶部的距离
        • left right 元素左/右距离可视区左侧的距离
        • 返回值是一个对象。


javascript的offset系列属性总结_第1张图片

  • 获取元素在页面的绝对坐标
/**
  * 获取元素页面的left和top的值 高版本的写法
  * @param {obj} el 
  */
 function getPageOffset_hv(el){
    var rect=el.getBoundingClientRect();
    var sX=scrollX;
    var sY=scrollY;
    return{
        left:rect.left+sX,
        top:rect.top+sY
    }
 }
 /**
  * 获取元素页面的left和top的值 兼容版本的写法
  * @param {obj} el 
  * return []
  */
 function getPageOffset_lv(el){
     var l=el.offsetLeft;
     var t=el.offsetTop;
     while(el.offsetParent){//当前元素的父级存在
         el=el.offsetParent;
         //clentLeft 表示左边框  clentTop 表示上边框
         l+=el.offsetLeft+el.clientLeft;
         t+=el.offsetTop+el.clientTop;
     }
     return {
         left:l,
         top:t
     }
 }

你可能感兴趣的:(Javascript)