Javascript学习之路：页面位移、大小和位置属性整理

🤞🤞 一、window

window 滚动位移属性

• window.scroll(X,Y) 滚动数不叠加
• window.scrollTo(X,Y) 滚动数不叠加
• window.scrollBy(X,Y) 滚动数叠加
• window.scrollY / Firefox、Chrome、Opera均支持，IE不支持 忽略DOCTYPE定义规则

window窗口大小属性

• window.innerheight 返回窗口文档显示区的高度
• window.innerwidth 返回窗口文档显示区的宽度
• window.outerheight 返回窗口的外部高度
• window.outerwidth 返回窗口的外部宽度
• window.screen.height/width 显示器的完整分辨率
• screen.availHeight/Width 显示器去除任务栏的剩余分辨率

调整大小

• resizeTo(newWidth,newHeight)
• resizeBy(changeWidth,changeHeight)

window窗口定位属性

• window.pageXOffset 设置或返回当前页面相对于窗口显示区左上角的x位置
• window.pageYOffset 设置或返回当前页面相对于窗口显示区左上角的y位置 / IE9+、Firefox、Chrome、Opera均支持该方式获取页面,并且会忽略DOCTYPE定义规则
• window.screenLeft 网页正文部分左||window.screenX 左上角x坐标
• window.screenTop 网页正文部分上 ||window.screenY 左上角y坐标
• event.screenX/Y 事件发生时，鼠标距离显示器左上角的坐标

移动window窗口位置

• window.moveTo(newX,newY)
• window.moveBy(changeX,changeY)

🤞🤞二、Document

HTML元素上的scrollTop属性

• document.documentElement.scrollTop
  如果未定义DOCTYPE文档头，所有浏览器都支持docume.body.scrollTop属性获取滚动高度
  如果页面定义了DOCTYPE文档头，那么HTML元素上的scrollT属性在IE、Firefox、Opera（presto内核）下都可以获取滚动高度值，而在Chrome和Safari下其值为0**。
• document.documentElement.scrollLeft 设置和获取页面文档向右滚动过的像素数
• document.documentElemnt.scrollTop 设置和获取页面文档向下滚动过的像素数
• document.documentElement.scrollWidth html元素对象的滚动宽度
• document.documentElement.scrollHeight 即html元素对象的滚动高度

实际开发中的写法

var _scrollLeft=window.scrollX||window.pageXOffset||document.documentElement.scrollLeft
var _scrollLeft=window.scrollY||window.pageYOffset||document.documentElement.scrollTop

元素位置属性 el

• el.clientTop：该元素对象的上边框的宽度
  • document.ducumentElement.clientTop 获取html元素对象的上边框的宽度
• el.clientLeft: 该元素对象的左边框的宽度
  • document.documentElement.clientLeft 获取html元素对象的左边框的宽度
• el.clientWidth: 元素内容的宽度，不包括边框
• el.clientHegiht: 元素内容的高度
• el.offsetLeft: 元素左边框到窗口左边界的距离
  • document.documentElement.offsetLeft html元素的margin
• el.offsetTop：元素上边框到窗口上边界的距离
  • document.documentElement.offsetTop html元素的margin
• 在IE中，offsetLeft和offsetTop的值始终为0。

el.offsetWidth: 左外边框至右外边框的距离

el.offsetHeight: 上外边框至下外边框的距离

元素位置属性 body

• document.body.clientWidth 网页可见区域宽
• document.body.clientHeight 网页可见区域高
• document.body.offsetWidth 网页可见区域宽（包括边线的宽）
• document.body.offsetHeight 网页可见区域高（包括边线的高）
• document.body.scrollWidth 网页正文全文宽
• document.body.srollHeight 网页正文全文高
• document.body.srollTop 网页被卷去的高
• document.body.scrollLeft 网页被卷去的左

🤞🤞 三、Screen对象

Screen对象 显示器的高度和宽度

• screen.availHeight 返回显示屏幕的高度(除Windows任务栏40之外)/屏幕可见工作区高度
• screen.availWidth 返回显示屏幕的宽度(除Windows任务栏之外)/屏幕可见工作区宽度
• screen.height 返回显示屏的高度 分辨率
• screen.width 返回显示器屏幕的宽度 分辨率

🤞🤞 四、event对象

事件位移对象 event

• e.clientX、e.clientY
  鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
• e.pageX、e.pageY
  类似于e.clientX、e.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
• e.offsetX、e.offsetY
  鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
• e.screenX、e.screenY
  鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性