浏览器和元素的尺寸、位置有关的属性和方法

学习笔记,写的不是很全,兼容性尚未测试。

属性 作用 兼容性
screen.width
screen.heihgt
   
   
screen.availWidth
screen.availHeight
   
   
window.innerWidth
window.innerHeight
浏览器视口尺寸,去除浏览器菜单栏、工具栏、状态栏,但包含滚动条的尺寸,  
window.outerWidth
window.outerHeight
 浏览器窗口外边框尺寸  
 浏览器窗口外边框尺寸  
window.screenX
window.screenY
window.screenTop
window.screenLeft
窗口在屏幕中的位置  
window.pageXOffset
window.pageYOffset
   
   
Element.getBoundingClientRect() 返回元素对应border-box方框到视口的偏移坐标,  
Element.getClientRects() 返回类数组,对以inline方式显示的元素来说,每行行框都是一个方框,返回所有这些方框到视口的偏移坐标,对显示为块级的元素来说,效果同getBoundingClientRect()  
document.elementFromPoint()  指定相对于视口的坐标,返回该坐标处的元素。如果有定位元素,返回z-index最大(最上层)的,否则返回该处在文档树中最深的节点元素。  
Element.offsetWidth
Element.offsetHeight
Element.offsetLeft
Element.offsetTop
元素滚动可见部分内容border-box的尺寸。offsetLeft, offsetTop返回到offsetParent的距离  
Element.offsetParent 偏移的上级参照元素  
Element.clientWidth
Element.clientHeight
Element.clientLeft
Element.clientTop
元素滚动可见部分内容padding-box(不含滚动条)的尺寸,对显示为inline的元素来说,始终返回0。clientLeft,
clientTop返回padding-box外边缘到border-box外边缘的距离,通常来说就是边框宽度。但对于从右到左书写的语言来说,垂直滚动条出现在padding-box左侧,所以client-left还包括了滚动条的宽度。
 
Element.scrollWidth
Element.scrollHeight
Element.scrollLeft
Element.scrollTop
padding-box滚动整体的尺寸。在没有内容溢出时,scrollWidth, scrollHeight和clientWidth, clientHeight是相等的。 scrollLeft, scrollTop为视口相对元素左上角的滚动偏移量,且为可写属性。  
window.scroll()
window.scrollTo()
   
window.scrollBy()    
Element.scrollIntoView()