jQuery与js常用方法对比(3)_H5之家 - 中国HTML5教程资源分享第一站

window

window.innerWidth/innerHeight: 浏览器可视窗口宽度, 高度(不含浏览器的边框，但包含滚动条, 调出debug工具会减去其宽高).

window.outerWidth/outerHeight：整个浏览器宽度, 高度(包含浏览器的边框，因各个浏览器的边框不一样，得到的值也是不一样的).

window.screenLeft/screenTop:

ie浏览器的内边缘距离屏幕边缘的距离

chrome浏览器的外边缘距离屏幕边缘的距离

window.screenX/screenY:

ie9/10浏览器的外边缘距离屏幕边缘的距离

chrome浏览器的外边缘距离屏幕边缘的距离

由此可知，chrome的screenLeft和screenX是相等的（其目的是为了兼容ie和firefox，两个属性都兼备了，但更趋向于firefox，chrome的这种做法不止这一处，还有很多，其实这种做法便于开发者移植，但对开发者的开发过程产生了一定的混淆），ie9/10的screenLeft是大于screenX的.

window.pageXOffset/pageYOffset: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离

兼容：ie9/10、chrome、firefox

window.scrollX/scrollY: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。由此可知，在chrome和firefox中window.pageXOffset和window.scrollX是相等的，具体为什么会出现两个相等的属性值，不得而知

兼容：chrome、firefox

偏移距离是指页面被向上滑动, 向左滑动超出浏览器窗口部分的高度和宽度
screen

screen.width/height: 屏幕的宽度、高度(指的是屏幕的分辨率，单位为像素, 不是浏览器窗口)

此处必须是screen.width，而不是screenWidth，与接下来要说的各种宽度有所区别

screen.availWidth/availHeight: 屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致, 有时要减去任务栏或Mac-OS系统上面导航条宽高)

元素属性

clientHeight, clientWidth属性:

有滚动条时: clientWidth=内边距宽度+内容宽度-元素垂直滚动条宽度

无滚动条时: clientWidth=内边距宽度+内容宽度

滚动条一般会在边框内出现

clientLeft, clientTop: clientLeft为左边框宽度，clientTop为上边框宽度

offsetWidth/offsetHeight属性: 边框宽度+内边距宽度+内容宽度

分享给小伙伴们：

本文标签： jQuery/">jQuery

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻