在实战项目中,我们经常会想获取客户端的可视高度,客户端的大小的,页面的高度,但是却一下脑子却想不起来。因为我回想到很多名词,比如screenLeft,clientX,pageX,这些名词,但感觉他们都差不多。我想必要系统把他们给揪出来好好区分一下。
获取客户端高度,和宽度
夸浏览器确定一个客户端的高度,和宽度可不是,一件容易的事情。
IE9,Firefox,Safari,Opera和chrome均为此提供了四个属性,innerHeight,innerWidth,outerHeight,outerWidth。出了Opear,chrome以外,其他outerHeight都是浏览器大小,而Opera返回的浏览器减去边边框的宽度,chrome返回的视口宽度。
在浏览器中保留了documen.doucmentElment.clientWidth保留视口的信息,但是在ie下只能是标准模式下,才能怎么获取,不然必须要用document.body.clientWidth来获取视口信息
var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if (typeof pageWidth != "number") { if (document.compatMode == "CSS1Compat") { pageWidth = document.documentElment.clientWidth; pageHeight = document.documentElment.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }
移动端window.innerWidth和window.innerHeight是保存视口的,但是ie浏览器却不是,但通过document.documentElement.clientHeight来标记视口。页面大小没什么可说的documen.body.ClientHeight用获取客户端高度。
获取鼠标的高度
鼠标触发事件后,在回调函数中,会传入event参数,这个参数会提供一些信息。
event.clientX:事件对象离视口的水平距离
event.pageX:事件的对象页面高度。
documen.body.scollTop: 滚动的高度
scollTop + clientY 与pageY相等