🤞🤞 一、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个属性
不生效)
