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

作者: aliensq | 来源:发表于2018-05-15 23:29 被阅读13次
背景:对JS的各种宽和高的概念总是有一种模糊感,所以好好梳理了一下,本文实例代码不多,更多是总结它的概念,建议多实际操作以下,印象会更深,如果有和我一样感到困惑的小伙伴,希望这篇文章对大家有所帮助

window.innerWidth/innerHeight

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

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

window.outerWidth/outerHeight

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

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

window.screenLeft/screenTop

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

window.screenX/screenY

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

  • ie9/10浏览器的外边缘距离屏幕边缘的距离
  • chrome浏览器的外边缘距离屏幕边缘的距离
alert(window.screenX);
// ie6/7/8=>undefined
alert(window.screenY);
// ie6/7/8=>undefined

window.pageXOffset/pageYOffset

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

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

window.scrollX/scrollY

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

document.onclick=function(){
alert(window.scrollX);
    // ie6/7/8/9/10=>undefined
alert(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; 

相关文章

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

    window.innerWidth/innerHeight 描述:浏览器可见区域的内宽度、高度(不含浏览器的边框,...

  • 区分js中各种宽高及位置

    1. clientWidth、scrollWidth、offsetWidth 浏览器的视口(不包括工具栏和滚动条)...

  • jQ中 各种坐标和宽高

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,...

  • jQuery中宽、高、位置和滚动条总结

    js中各种宽高令人头疼,相反,jQuery中则精简了不少。 宽、高 jQuery中获取宽高,最经典的就是width...

  • jS中关于各种宽高

    offsetWidth;//元素的宽度(包括元素宽度、内边距和边框,不包括外边距)clientWidth;//元素...

  • JS中的各种宽高

    Dom对象的宽高 dom对象会涉及到宽高,和定位的问题,对于可以滚动的dom对象,还会涉及到隐藏的部分。 clie...

  • JS中宽高总结

    写在前面: Window和document对象的区别 window对象表示浏览器中打开的窗口 window对象是可...

  • js中的各种宽高以及位置总结

    前言 被原生js的各种宽高、位置搞到爆炸,所以做一个小小的总结!!! dom对象 只读属性 clientWidth...

  • js中的各种宽高理解

    在js之中有很多方法,属性是与宽高相关的,但是具体的区别又不太清楚。现就这些表示宽高的方法属性做一总结。假设我们有...

  • js/jq各种宽高

    (转)JS下各种宽高 转自https://segmentfault.com/a/1190000007681873 ...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/kscudftx.html