react专栏前端那些事儿(谈谈前端开发)让前端飞

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

2018-05-15  本文已影响13人  aliensq
背景:对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

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

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

描述:计算如下:

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

描述:计算方法如,

有滚动条时:

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)。

(event.clientX + document.documentElement.scrollLeft, 
 event.clientY + document.documentElement.scrollTop )
  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; 
上一篇 下一篇

猜你喜欢

热点阅读