原生JS 窗口尺寸：

console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + window.innerHeight)

console.log('document.body.clientWidth = ' + document.body.clientWidth + '---document.body.clientHeight = ' + document.body.clientHeight)

 

JQuery 窗口尺寸：

console.log($(window).height()); //浏览器时下窗口可视区域高度

console.log($(document).height()); //浏览器时下窗口文档的高度

console.log($(document.body).height());//浏览器时下窗口文档body的高度

console.log($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin

console.log($(window).width()); //浏览器时下窗口可视区域宽度

console.log($(document).width());//浏览器时下窗口文档对于象宽度

console.log($(document.body).width());//浏览器时下窗口文档body的高度

console.log($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

console.log($(document).scrollTop()); //获取滚动条到顶部的垂直高度

console.log($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

 

Javascript:

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

 

JQuery:

$(document).ready(function(){

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

})

注意：$(window).height()会随着浏览器的可见高度而变化，当最大化浏览器时该值最大，当缩小浏览器的可视高度时，该值会变小。

但是，$(document).height()不会随着浏览器的可视高度的变化而变化，它是整个文档的高度。

不管页面中是否有垂直的滚动条出现，该值都是一样的，都是整个页面文档的高度。

 

获取滚动条到顶部的垂直高度 ：

$(document).scrollTop();

获取滚动条到左边的垂直宽度 ：

$(document).scrollLeft();

计算元素位置和偏移量：

$(id).offset();

 

offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

offset(options, results)

options.relativeTo　　指定相对计

算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

options.scroll　　是否把

滚动条计算在内，默认TRUE

options.padding　　是否把padding计算在内，默认false

options.margin

　　是否把margin计算在内，默认true

options.border　　是否把边框计算在内，默认true