XFE 技术 生活 文集

javascript获取高宽和坐标

🔖 javascript 👀 18 🕒 2018-06-11

坐标

   event.screenX        鼠标/触摸,相对于显示屏的X坐标
   event.screenY        鼠标/触摸,相对于显示屏的Y坐标

   event.clientX        鼠标/触摸,相对于浏览器视口的X坐标
   event.clientY        鼠标/触摸,相对于浏览器视口的Y坐标

   event.pageX          鼠标/触摸,相对于文档的X坐标(ie不支持)
   event.pageY          鼠标/触摸,相对于文档的Y坐标(ie不支持)

   event.offsetX        鼠标/触摸,相对于触发事件的X坐标(ie独有)
   event.offsetY        鼠标/触摸,相对于触发事件的Y坐标(ie独有)

   window.pageXOffset   X轴滚动条,能向右滚动的距离(ie不支持)
   window.pageYOffset   Y轴滚动条,能向下滚动的距离(ie不支持)

   body.scrollLeft      window.pageXOffset在ie上的替代
   body.scrollTop       window.pageYOffset在ie上的替代

宽高

   screen.width          屏幕宽度
   screen.height         屏幕高度
   screen.availWidth     屏幕可用宽度
   screen.availWidth     屏幕可用高度

   window.outerWidth     游览器宽度
   window.outerHeight    游览器高度
   window.innerWidth     游览器视口宽度
   window.innerHeight    游览器视口高度

   body.offsetWidth      页面宽度
   body.offsetHeight     页面高度
   body.clientWidth      页面可显示宽度
   body.clientHeight     页面可显示高度

偏移

   offsetWidth           元素宽度[可视内容区+滚动条+内边距+边框]
   offsetHeight          元素高度
   offsetLeft            与相邻父级的左距离
   offsetTop             与相邻父级的上距离

视区

   clientWidth          元素宽度[可视内容区+内边距]
   clientHeight         元素高度
   clientLeft           内边距边缘与边框边缘的距离[左边框]
   clientTop            内边距边缘与边框边缘的距离[上边框]

滚动

   scrollWidth          元素宽度[可视内容区+滚动内容区+内边距]
   scrollHeight         元素高度
   scrollLeft           隐藏的滚动宽度[待滚动宽度]
   scrollTop            隐藏的滚动高度

临近父容器

   offsetParent 

在webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style.display 为 "none"),或者该元素的 style.position 被设为 "fixed",则该属性返回 null

兼容性

   clientWidth/clientHeight和scrollWidth/scrollHeight存在游览器差异

文档坐标

DOM元素临近父级的left和top位置——通过offectLeft和offectTop获取

 function getElementPosition(e) { 
     var x = 0, y = 0; 
     while (e != null) {
        x+=e.offsetLeft;
        y+=e.offsetTop;
        e=e.offsetParent; 
     } 
     return { x: x, y: y }; 
  }
说明

1.对于表格和内嵌框架布局的页面, 由于不同浏览器实现这些元素的方式不同, 得到的值并不精确
2.当文档中含有滚动条的时候,该方法就不能正常工作了

视口坐标

    getBoundingClientRect()   返回带dom坐标和宽高的对象
                              ——宽高[可视内容区+内边距+边框]   
                              ——坐标[left:位移+外边距][right:位移+外边距+边框+内边距+可视内容区]
    getClientRects()          返回集合