document window高度的计算

来源:互联网 发布:数控程序仿真软件 编辑:程序博客网 时间:2024/06/18 17:03
js中,有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度


对于 Internet Explorer 8、7、6、5:(不支持window.innerHeight和window.innerWidth属性)

document.documentElement.clientHeight
document.documentElement.clientWidth


或者

document.body.clientHeight
document.body.clientWidth


文档内容无滚动条:

document.body.clientHeight = window.innerHeight = document.documentElement.clientHeight;
window.innerWidth >  document.body.clientWidth = document.documentElement.clientWidth
(大几个像素而已)


文档内容有滚动条:

document.body.clientHeight >> window.innerHeight = document.documentElement.clientHeight;
(远远大于)
实用的 JavaScript 方案(涵盖所有浏览器):
var w = window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;


jQuery中

$(window).height();  浏览器显示网页内容的部分
$(window).width();
$(document).height();  整个网页文档流
$(document).width();
文档内容有滚动条:$(document).height() >> $(window).height();


jQuery 尺寸方法,返回不包括单位,

width() 方法设置或返回元素的宽度、高度(不包括内边距、边框或外边距)。
height()
innerWidth() 返回元素的宽度、高度(包括内边距)。
innerHeight()
outerWidth() 方法返回元素的宽度、高度(包括内边距和边框)
outerHeight()
outerWidth(true) 方法返回元素的宽度、高度(包括内边距、边框和外边距)。
outerHeight(true)


<div style="height:100px;width:300px ;padding:10px; margin:3px; border:1px solid blue"></div>

$("div").width():  300 

$("div").height(): 100

$("div").innerWidth()(): 320

$("div").innerHeight():  120

$("div").outerWidth():   322

$("div").outerHeight():  122 

$("div").outerWidth(true): 328

$("div").outerHeight(true): 128

0 0