每次碰到元素滚动呀、鼠标拖动呀之类的通过对比位置来触发事件的需求时,都要花很多时间来百度怎么取到自己想要的那个值,什么scrollTop、offset等等,今天就把这些东西总结一下,以后再使用的话,就不用各种的百度了。
一,window窗口的各种距离
screen.width/height: 屏幕的宽度/高度
window.innerWidth/innerHeight : 窗口显示区的宽度/高度
window.outerWidth/outerHeight : 窗口的外部宽度/高度
window.pageXOffset/pageYOffset : 当前页面相对于窗口显示区左上角的 X 位置 / Y 位置
window.screenLeft/screenTop : 当前窗口的左上角在屏幕上的的 x 坐标和 y 坐标; Firefox支持screenX和screenY。
二,元素的各种距离 (常用)
1,el.style.width / height / left / right:
<div style=" 100px;height: 100px;"></div>
获取元素内联样式的宽度/高度/left值/right值。 如果元素上没写内联样式则返回空字符串 (不包括padding、border和margin,并且返回的值会带单位)
2,window.getComputedStyle().width / height / left / right:
获取元素最终经过浏览器计算出来的width height left right。 (不包括padding、border和margin,并且返回的值会带单位)
3,el.offsetWidth / offsetHeight : 获取元素的宽度/高度。(包括padding、border)
4,el.offsetTop / offsetLeft: 获取元素距离最近的采用定位的祖先元素的 top/Left,如果祖先元素没有采用定位的,则计算到body的距离。
5,el.clientWidth / clientHeight / clientLeft / clientTop : 获取当前元素的内部宽度/内部高度/左边框宽度/上边框宽度 (包含padding,如果有滚动条,则要去掉滚动条的宽度)
6,el.scrollWidth/scrollHeight : 如果没有滚动条,则和clientWidth/height的值一样,如果有滚动条,则为内部元素的总高度/宽度(包含padding,有滚动条则去掉滚动条的宽度)
7,el.scrollTop/scrollLeft : 此属性为可读写属性,为元素离父元素的滚动高度和滚动左边距。也可以设置当前元素的滚动高度。 (返回的值不带单位)
三: 触点的距离
(这里的触点就是事件中event对象所包含的各种位置信息。)
pageX pageY : 这两个是距离本页面左部和 顶部的距离, 即使 页面有滚动, 也包括滚动的距离
clientX, clientY 这也是距离页面左部和顶部的距离, 如果页面没有滚动条, 它俩的值和pageX pageY相同, 如果有滚动条 不包含滚动的距离!
offsetX offsetY : 距离当前元素的左部和顶部的距离
screenX screenY : 获取当前触点到当前屏幕的x坐标和y坐标。
layerX layerY : 获取当前触点到最近的采用定位的祖先元素的 x和y坐标。如果祖先元素没有定位元素,则以body元素为基准。
x y : 返回当前触点相对于可视区域的 x坐标和y坐标。
offsetX / offsetY: W3C- IE+ Firefox- Opera+ Safari+ chrome+
x / y: W3C- IE+ Firefox- Opera+ Safari+ chrome+
layerX/layerY: W3C- IE- Firefox+ Opera- Safari+ chrome+
pageX/pageY: W3C- IE- Firefox+ Opera+ Safari+ chrome+
clientX/clientY: W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
screenX/screenY: W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
只有 clientX/ clientY 和 screenX/ screenY 是标准并且所有的都兼容, 其他的如果要使用, 请做兼容处理吧