JS和jquery获取各种屏幕的宽度和高度和简单的宽度判断
所属分类：
发布时间： 11:20
jquery获取各种屏幕的宽度和 高度和简单的宽度判断
&script type=&text/javascript&&
jQuery(function(){
jq(window).load(function () {
jq(window).width() &=1600
jq('#in').addClass(&w1680&);
jq(window).width() &=1420 && jq(window).width() & 1600) {
jq('#in').addClass(&w1440&);
jq(window).width() &=1346 && jq(window).width() & 1420) {
jq('#in').addClass(&w1366&);
jq(window).width() &=0 && jq(window).width() & 1346) {
jq('#in').addClass(&w1024&);
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
转载请自觉注明原文:
声明：本站所有素材/文章除标明原创外，均来自网络转载，仅供学习和参考之用，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢合作！
相关文章：（责任编辑：）
友情链接:联系人：QQjavascript（138）
//得到页面高度
var yScroll = (document.documentElement.scrollHeight &document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientH
alert(yScroll)
//得到页面宽度
var xScroll=(document.documentElement.scrollWidth&document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollW
alert(xScroll)
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：203237次
积分：2223
积分：2223
排名：第14479名
转载：432篇
(3)(25)(26)(50)(11)(1)(7)(3)(22)(42)(27)(64)(6)(3)(11)(62)(32)(1)(1)(18)(23)JS获取浏览器窗口大小&获取屏幕，浏览器，网页高度宽度_zhaojun908_新浪博客
JS获取浏览器窗口大小&获取屏幕，浏览器，网页高度宽度
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
相对文档的水平座标+垂直方向滚动的量&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均无关)
网页可见区域宽： 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
－－－－－－－－－－－－－－－－－－－
​本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要
深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body.
clientWidth表示HTML文档所在窗口的当前宽度。实现代码
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
请调整浏览器窗口大小
浏览器窗口 的 实际高度:
浏览器窗口 的 实际宽度:
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions (
)中，使用windows.innerHeight和windows.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
zhaojun908
博客等级：
博客积分：0
博客访问：203
关注人气：0
荣誉徽章：