JS获取屏幕,浏览器,网页高度宽度

网页可见区域宽: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

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

PS:document.documentElement.scrollTop+document.body.scrollTop(兼容IE、FF、Chrome)

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5: 
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

EX1:

CSS:

#bgScreen, #bgIFrame { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; background: #000; filter: alpha(opacity=20); opacity: 0.2; _position: absolute; _top: expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight ); }

#bgIFrame { z-index: 998; filter: alpha(opacity=0); opacity: 0; }

JS:

$("#bgScreen, #bgIFrame").css("height", jQuery.browser.version == ‘6.0‘ ? window.screen.height - 160 : ‘100%‘);

EX2:

JS:

var findDimensions = function()

{

var winWidth = 0;

var winHeight = 0;

//获取窗口宽度

if (window.innerWidth)

{

winWidth = window.innerWidth;

}

else if ((document.body) && (document.body.clientWidth))

{

winWidth = document.body.clientWidth;

}

//获取窗口高度

if (window.innerHeight)

{

winHeight = window.innerHeight;

}

else if ((document.body) && (document.body.clientHeight))

{

winHeight = document.body.clientHeight;

}

//通过深入Document内部对body进行检测,获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

return winWidth + "-" + winHeight;

}

var _height = findDimensions().split("-");

alert(_height[1]);

时间: 2024-10-29 19:10:46

JS获取屏幕,浏览器,网页高度宽度的相关文章

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

js获取各种浏览器窗口可视部分大小(可视部分不包含工具栏、标签栏等)

js获取各种浏览器窗口可视宽度和高度(不包含工具栏和标签栏). function getViewportSize(w){ w= w || window; //除了IE8以及更早版本外,其它浏览器都能用 if(w.innerWidth != null){ return { w:w.innerWidth, h:w.innerHeight } }; //对标准模式下的IE或任何浏览器 var d=w.document; if(document.compatMode == "CSS1Compat&quo

[JavaScript] js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如,这中情况通过 上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以 我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内style中的 属性都不能通过id.style.at

js获取屏幕

js获取屏幕(设备)宽高 <script language="javascript"> var h = ""; h += " 网页可见区域宽:"+ document.body.clientWidth+"\n"; h += " 网页可见区域高:"+ document.body.clientHeight+"\n"; h += " 网页可见区域宽:"+ docu

JS获取IE浏览器信息类型、版本、语言等

分享下JS获取IE浏览器信息包括类型.版本.语言等的实例. 代码: <html> <head> <title>JS完整获取IE浏览器信息--www.jbxue.com</title> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table

ios 获取屏幕的属性和宽度

1.app尺寸,去掉状态栏 CGRect r = [ UIScreen mainScreen ].applicationFrame; r=0,20,320,460 另外:self.view.bounds.size 2.屏幕尺寸 CGRect rx = [ UIScreen mainScreen ].bounds; r=0,0,320,480 3.状态栏尺寸 CGRect rect; rect = [[UIApplication sharedApplication] statusBarFrame]

JS获取当前浏览器的类型

<script type=“text/javascript”> function isIE(){return navigator.appName.indexOf(“Microsoft Internet Explorer”)!=-1 && document.all;} function isIE6() {return navigator.userAgent.split(“;”)[1].toLowerCase().indexOf(“msie 6.0″)==“-1″?false:tr

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

整理 js 获取屏幕、页面、浏览器高度和宽度值方法

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.b