JS获取各种浏览器窗口大小的方法

常用:
JS 获取浏览器窗口大小


代码如下:

// 获取窗口宽度
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;
}

详细:
关于获取各种浏览器可见窗口大小:
<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽：" document.body.clientWidth;
s = " 网页可见区域高：" document.body.clientHeight;
s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽：" document.body.scrollWidth;
s = " 网页正文全文高：" document.body.scrollHeight;
s = " 网页被卷去的高(ff)：" document.body.scrollTop;
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
s = " 网页被卷去的左：" document.body.scrollLeft;
s = " 网页正文部分上：" window.screenTop;
s = " 网页正文部分左：" window.screenLeft;
s = " 屏幕分辨率的高：" window.screen.height;
s = " 屏幕分辨率的宽：" window.screen.width;
s = " 屏幕可用工作区高度：" window.screen.availHeight;
s = " 屏幕可用工作区宽度：" window.screen.availWidth;

s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：

Opera仍然使用
document.body.clientWidth
document.body.clientHeight

可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话 在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高）

赞 (0)

相关推荐

  • jQuery监听浏览器窗口大小的变化实例

    方法一:在标签上加入  onLoad="" onResize=""  方法  写上对应的方法即可 方法二:window.onresize=function(){///.....} 在方法里面写上对应的代码即可 着两种方法基本都可以解决问题. <script> function adjust(obj){ var div = document.getElementById("pad"); var txt = document.getEle

  • Jquery根据浏览器窗口改变调整大小的方法

    如下所示: 当浏览器窗口发生该表示,会触发resize函数 // 浏览器大小发生变化时,给id为main-container的容器设置最小高度 <script type="text/javascript"> $(function(){ $(window).resize(function(){ $("#main-container").css("min-height", $(window).height() - 343); }).res

  • js实现浏览器窗口大小被改变时触发事件的方法

    本文实例讲述了js实现浏览器窗口大小被改变时触发事件的方法.分享给大家供大家参考.具体分析如下: 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 复制代码 代码如下: <span id="info_jb51_net">请改变浏览器窗口大小</span> <script> window.onresiz

  • 基于jquery的获取浏览器窗口大小的代码

    复制代码 代码如下: function getTotalHeight(){ if($.browser.msie){ return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight : document.body.clientHeight; } else { return self.innerHeight; } } function getTotalWidth (){ if($.brows

  • jQuery 计算iframe 窗口大小的方法

    复制代码 代码如下: <iframe id="aaax" src="" scrolling="no" frameborder="0" style="display:none"></iframe> <script language="javascript" type="text/javascript"> $(function () {

  • 使用jQuery监听DOM元素大小变化

    起因 今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出.但是又不知道如何为多说的评论按钮增加回调函数,于是乎就想到了根据子元素的大小变化来重新计算父元素的height. onresize? 平常,都是在整个浏览器窗口变化时触发一个修改布局的回调函数.使用的是window对象的resize事件,利用: window.onresize =

  • jquery实现根据浏览器窗口大小自动缩放图片的方法

    本文实例讲述了jquery实现根据浏览器窗口大小自动缩放图片的方法.分享给大家供大家参考.具体如下: (function($){ $.fn.resizeimage = function(){ var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload =

  • 浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

    浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法,如下: 复制代码 代码如下: $(window).resize(function(){var surH = $(window).height();$(".pic_conent").height(surH);} 当浏览器变化,拉大拉小时,没有反应: 方法一:在标签上加入  onLoad="" onResize=""  方法  写上对应的方法即可方法二:window.onresize=

  • JS获取各种浏览器窗口大小的方法

    常用:JS 获取浏览器窗口大小 复制代码 代码如下: // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeig

  • JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

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

  • js获取图片宽高的方法

    js获取图片宽高的方法

    本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • JS获取本地地址及天气的方法实例小结

    本文实例讲述了JS获取本地地址及天气的方法.分享给大家供大家参考,具体如下: 一.获取本地的地址 第一种方式: 1.利用浏览器获取当前位置的经纬度 window.onload=getCurrentPosition; //浏览器获取当前位置 function getCurrentPosition() { if (window.navigator.geolocation) { var options = { enableHighAccuracy: true, }; window.navigator.

  • JS动态改变浏览器标题的方法

    本文实例讲述了JS动态改变浏览器标题的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <hea

  • js获取内联样式的方法

    本文实例讲述了js获取内联样式的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,in

  • JS获取年月日时分秒的方法分析

    本文实例分析了JS获取年月日时分秒的方法.分享给大家供大家参考,具体如下: var d = new Date(); var time = d.getFullYear() + "-" +(d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 必须这么繁杂,没

  • js获取元素的标签名实现方法

    有时候我们想获取到一个标签的名称,例如:<div>a</div>得到"div".请看下面的例子: 页面上有一个class="a"的标签,可能是input,也可能是普通的div或者是span标签,现在我们要往这个标签加一个值"value1".如果是input则将其value属性设置为value1,div则将其innerHTML设置为value1.如何实现呢-- 如果纯js实现如下: //找到这个标签的代码略 this 代表找

  • JS获取图片lowsrc属性的方法

    本文实例讲述了JS获取图片lowsrc属性的方法.分享给大家供大家参考.具体如下: lowsrc属性一般设置为图片的低分辨率图片地址,下面的代码可以通过点击链接显示图片的低分辨率版本 <!DOCTYPE html> <html> <body> <img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="Computer

随机推荐