Javascript、Jquery获取浏览器和屏幕各种高度宽度

时间:2018-06-02 19:08:43          访问次数:0

IE中:  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度  
FireFox中:  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度  
Opera中:  
document.body.clientWidth ==> 可见区域宽度  
document.body.clientHeight ==> 可见区域高度  
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)  
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)  
没有定义W3C的标准,则  
IE为:  
document.documentElement.clientWidth ==> 0  
document.documentElement.clientHeight ==> 0  
FireFox为:  
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)  
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)  
Opera为:  
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)  
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)  
 
 
网页可见区域宽: 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 相对文档的水平座标+垂直方向滚动的量

简单的说:

Javascript: 
 
alert(document.body.clientWidth);        //网页可见区域宽(body) 
 
alert(document.body.clientHeight);       //网页可见区域高(body) 
 
alert(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等 
 
alert(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等 
 
alert(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域 
 
alert(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域 
 
alert(document.body.scrollTop);           //网页被卷去的Top(滚动条) 
 
alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条) 
 
alert(window.screenTop);                     //浏览器距离Top 
 
alert(window.screenLeft);                     //浏览器距离Left 
 
alert(window.screen.height);                //屏幕分辨率的高 
 
alert(window.screen.width);                 //屏幕分辨率的宽 
 
alert(window.screen.availHeight);          //屏幕可用工作区的高 
 
alert(window.screen.availWidth);           //屏幕可用工作区的宽 
 
  
 
Jquery 
 
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


关键词:javascript,jquery,获取,浏览器,屏幕,各种,高度,宽度
分享到
  • QQ空间
  • QQ好友
  • 新浪微博
  • 腾讯微博
  • 人人网
  • 微信
  • 更多

扫一扫

让网页瞬间转移到移动设备