手记
下载APP

JS中各种宽高及坐标问题总结


背景:对JS的各种宽和高的概念总是有一种模糊感,所以好好梳理了一下,本文实例代码不多,更多是总结它的概念,建议多实际操作以下,印象会更深,如果有和我一样感到困惑的小伙伴,希望这篇文章对大家有所帮助

window.innerWidth/innerHeight

描述:浏览器可见区域的内宽度、高度(不含浏览器的边框,但包含滚动条)

alert(window.innerWidth);// ie6/7/8=>undefinedalert(window.innerHeight);// ie6/7/8=>undefined

window.outerWidth/outerHeight

描述:浏览器外宽度(包含浏览器的边框,因各个浏览器的边框边一样,得到的值也是不一样的)

alert(window.outerWidth);// ie6/7/8=>undefinedalert(window.outerHeight);// ie6/7/8=>undefined

window.screenLeft/screenTop

alert(window.screenLeft);// firefox=>undefinedalert(window.screenTop);// firefox=>undefined

window.screenX/screenY

描述:浏览器的位移,表示:

  • ie9/10浏览器的外边缘距离屏幕边缘的距离

  • chrome浏览器的外边缘距离屏幕边缘的距离

alert(window.screenX);// ie6/7/8=>undefinedalert(window.screenY);// ie6/7/8=>undefined

window.pageXOffset/pageYOffset

表示浏览器X轴(水平)、Y轴(垂直)滚动条的偏移距离

document.=function(){
alert(window.pageXOffset);    // ie6/7/8=>undefinedalert(window.pageYOffset);    // ie6/7/8=>undefined};

window.scrollX/scrollY

描述:表示浏览器X轴(水平)、Y轴(垂直)滚动条的偏移距离

document.=function(){
alert(window.scrollX);    // ie6/7/8/9/10=>undefinedalert(window.scrollY);    // ie6/7/8/9/10=>undefined};

screen.width/height

描述:屏幕的宽度、高度(指的是屏幕的分辨率,单位为像素)
兼容性:ie6/7/8/9/10、chrome、firefox

下面自己要测试的话~ 可以看上边的代码 ,就不贴代码了,主要解释下它的含义

screen.availWidth/availHeight

描述:屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致)。

兼容性:ie6/7/8/9/10、chrome、firefox。

elment.clientWidth/clientHeight

描述:计算如下:

  • 有滚动条时:clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度-元素垂直滚动条宽度

  • 无滚动条时:clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度
    兼容:chrome、firefox、ie6/7/8/9/10

element.clientLeft/clientTop

描述:clientLeft为左边框宽度,clientTop为上边框宽度。

兼容:chrome、firefox、ie6/7/8/9/10。

element.offsetWidth/offsetHeight

描述:offsetWidth=元素左边框宽度+元素左内边距宽度+元素宽度+元素右内边距宽度+元素右边框宽度。

兼容:chrome、firefox、ie6/7/8/9/10。

element.offsetLeft/offsetTop

描述:表示该元素相对于最近的定位祖先元素的距离,

chrome:offsetLeft=定位祖先左边框宽度+定位祖先元素左内边距宽度+左位移+左外边距宽度

ie6/7/8/9/10、firefox:offsetLeft=定位祖先元素左内边距宽度+左位移+左外边距宽度。

兼容:chrome、firefox、ie6/7/8/9/10。

element.scrollWidth/scrollHeight

描述:计算方法如,

有滚动条时:

  • chrome、firefox、ie8/9/10:左内边距宽度+内容宽度。

  • ie6/7:左内边距宽度+内容宽度+右内边距宽度(是由CSS的BUG引起)。

  • 无滚动条时:左内边距宽度+宽度+右内边距宽度。
    兼容:chrome、firefox、ie8/9/10、ie6/7(半兼容)。

element.scrollLeft/scrollTop

描述:获得水平、垂直滚动条的距离。

兼容:chrome、firefox、ie6/7/8/9/10。

关于坐标问题的总结

假设我们这里的元素是一个DIV,我们打印它的event对象,来看看它的属性

//相关属性解释clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(客户区)的垂直坐标。
screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。
screenY 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。
offsetX 事件发生的地点在事件源元素的坐标系统中的 x 坐标(ie)。
offsetY 事件发生的地点在事件源元素的坐标系统中的 y 坐标(ie)。
x       事件发生的位置的 x 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageX)。
y       事件发生的位置的 y 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageY)。
pageX   鼠标指针的位置,相对于文档的左边缘(firefox,~x)。
pageY   鼠标指针的位置,相对于文档的上边缘(firefox,~y)。
layerX  鼠标相比较于当前坐标系的位置(firefox,~offsetX)。
layerY  鼠标相比较于当前坐标系的位置(firefox,~offsetY)。
  • 怎样获取鼠标相对于浏览器可视文档区域左上角的位置?
    x, y和clientX, clientY皆可,但是x, y在IE下表示鼠标相对于文档开头的位置(即如果有滚到条的话,会计算在内),还有FF也不支持x, y
      
    推荐: clientX, clientY

  • 怎样获取鼠标相对于文档开头的位置?
    IE:使用x, y(前提是事件源的父元素(一直到documentElement)没有设置position:relative之类的,否则相对于最近元素,而非相对于文档)
    非IE:使用pageX, pageY
    layerX, layerY其实也可以,但是IE和Opera不支持

  • 据上面, 如何确保IE正常取值呢?

(event.clientX + document.documentElement.scrollLeft, 
 event.clientY + document.documentElement.scrollTop )
  • 怎样获取鼠标相对于事件源(event.target||event.srcElement)左上角的位置?
    offsetX, offsetY。但是FF不支持,怎样办呢?

  1. 先获取鼠标相对于浏览器可视文档区域左上角的位置

  2. 然后获取事件源相对于浏览器可视文档区域左上角的位置

  3. 相减
    第2步怎么做?

HTMLElement.getBoundingClientRect()方法 
返回值为:{top:xx, right:xx, bottom:xx, left:xx, width:xx, height:xx} 
//var box = (e.target || e.srcElement).getBoundingClientRect(), 
offsetX = e.clientX - box.left, 
offsetY = e.clientY - box.top;



作者:可爱的圣诞老人
链接:https://www.jianshu.com/p/6fc379c7d939


打开App,阅读手记
0人推荐
随时随地看视频慕课网APP