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

 网页可见区域宽:document.body.clientWidth 
 2 网页可见区域高:document.body.clientHeight 
 3 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
 4 网页可见区域高:document.body.offsetHeight (包括边线的宽) 
 5 网页正文全文宽:document.body.scrollWidth 
 6 网页正文全文高:document.body.scrollHeight 
 7 网页被卷去的高:document.body.scrollTop 
 8 网页被卷去的左:document.body.scrollLeft 
 9 网页正文部分上:window.screenTop 
 10 网页正文部分左:window.screenLeft 
 11 屏幕分辨率的高:window.screen.height 
 12 屏幕分辨率的宽:window.screen.width 
 13 屏幕可用工作区高度:window.screen.availHeight 
 14 屏幕可用工作区宽度:window.screen.availWidth 
 15 
 16 
 17 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
 18 scrollHeight: 获取对象的滚动高度。 
 19 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
 20 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
 21 scrollWidth:获取对象的滚动宽度 
 22 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
 23 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
 24 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
 25 event.clientX 相对文档的水平座标 
 26 event.clientY 相对文档的垂直座标 
 27 event.offsetX 相对容器的水平坐标 
 28 event.offsetY 相对容器的垂直坐标 
 29 document.documentElement.scrollTop 垂直方向滚动的值 
 30 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 
 31 
 32 IE,FireFox 差异如下: 
 33 
 34 IE6.0、FF1.06+: 
 35 clientWidth = width + padding 36 clientHeight = height + padding 37 offsetWidth = width + padding + border 38 offsetHeight = height + padding + border 39 
 40 IE5.0/5.5: 
 41 clientWidth = width - border 42 clientHeight = height - border 43 offsetWidth = width 44 offsetHeight = height 45 
 46 (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
 47 网页可见区域宽: document.body.clientWidth
 48 网页可见区域高: document.body.clientHeight
 49 网页可见区域宽: document.body.offsetWidth (包括边线的宽)
 50 网页可见区域高: document.body.offsetHeight (包括边线的高)
 51 网页正文全文宽: document.body.scrollWidth
 52 网页正文全文高: document.body.scrollHeight
 53 网页被卷去的高: document.body.scrollTop
 54 网页被卷去的左: document.body.scrollLeft
 55 网页正文部分上: window.screenTop
 56 网页正文部分左: window.screenLeft
 57 屏幕分辨率的高: window.screen.height
 58 屏幕分辨率的宽: window.screen.width
 59 屏幕可用工作区高度: window.screen.availHeight
 60 屏幕可用工作区宽度: window.screen.availWidth
 61 -------------------
 62 技术要点
 63 本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
 64 要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
 65 Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
 66 Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
 67 document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
 68 
 69 实现代码
 70 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 71 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 72 <html xmlns="http://www.w3.org/1999/xhtml">
 73 <head>
 74 <title>请调整浏览器窗口</title>
 75 <meta http-equiv="content-type" content="text/html; charset=gb2312">
 76 </head>
 77 <body>
 78 <h2 align="center">请调整浏览器窗口大小</h2><hr>
 79 <form action="#" method="get" name="form1" id="form1">
 80 <!--显示浏览器窗口的实际尺寸-->
 81 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
 82 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
 83 </form>
 84 <script type="text/javascript">
 85 <!-- 
 86 var winWidth = 0;
 87 var winHeight = 0;
 88 function findDimensions() //函数:获取尺寸
 89 {
 90 //获取窗口宽度
 91 if (window.innerWidth) 92 winWidth = window.innerWidth; 93 else if ((document.body) && (document.body.clientWidth)) 94 winWidth = document.body.clientWidth; 95 //获取窗口高度
 96 if (window.innerHeight) 97 winHeight = window.innerHeight; 98 else if ((document.body) && (document.body.clientHeight)) 99 winHeight = document.body.clientHeight; 100 //通过深入Document内部对body进行检测,获取窗口大小
101 if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth) 102 { 103 winHeight = document.documentElement.clientHeight; 104 winWidth = document.documentElement.clientWidth; 105 } 106 //结果输出至两个文本框
107 document.form1.availHeight.value= winHeight; 108 document.form1.availWidth.value= winWidth; 109 } 110 findDimensions(); 111 //调用函数,获取数值
112 window.onresize=findDimensions; 113 //-->
114 </script>
115 </body>
116 </html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355