js获取文本框的值!js获取浏览器高度和宽度值

JS取各种尺寸的方法JS取浏览器和网页可见区高和宽：<SCRIPT LANGUAGE="JavaScript">var s = "网页可见区域宽："+ document.body.clientWidth;s += "\r\n网页可见区域高："+ document.body.clientHeight;s += "\r\n网页正文全文宽："+ document.body.scrollWidth;s += "\r\n网页正文全文高："+ document.body.scrollHeight;s += "\r\n网页正文部分上："+ window.screenTop;s += "\r\n网页正文部分左："+ window.screenLeft;s += "\r\n屏幕分辨率的高："+ window.screen.height;s += "\r\n屏幕分辨率的宽："+ window.screen.width;s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;alert(s);</SCRIPT>普通DOM子元素的宽高获取：document.getElementById("元素id名称").style.widthdocument.getElementById("元素id名称").style.height在表格及其元素的CSS宽高获取上的浏览器兼容问题：对TABLE进行border-collapse:collapse;设定，对TR和TD进行display:block;设定，这时再去获取任意元素的宽高，各浏览器都会是一致的。

网页可见区域宽：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 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 ==> 0document.documentElement.clientHeight ==> 0FireFox为：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.availWidthHTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidthscrollHeight: 获取对象的滚动高度。

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.clientWidthdocument.body.clientHeight即可获得，很简单，很⽅便。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系js 获取浏览器高度和宽度值(多浏览器)2013/03/27 0 js获取浏览器高度和宽度,尽量的考虑了多浏览器。

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 == 0document.documentElement.clientHeight == 0FireFox为：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屏幕可用工作。

javascript获取⽹页宽⾼⽅法汇总document.body.clientWidth - ⽹页可见区域宽document.body.clientHeight - ⽹页可见区域⾼document.body.offsetWidth - ⽹页可见区域宽，包括边线和滚动条的宽document.body.offsetHeight - ⽹页可见区域⾼，包括边线和滚动条的⾼[FF,chrom下是整个页⾯⾼，IE opera 下正常] document.body.scrollWidth - ⽹页总宽document.body.scrollHeight - ⽹页总⾼document.body.scrollTop - 有滚动条的时候，向下拖动滚动条，上⽅不显⽰的那部分⾼度document.body.scrollLeft - 同上window.innerHeight - 浏览器窗⼝的内部⾼度window.innerWidth - 浏览器窗⼝的内部宽度window.screenTop - ⽹页正⽂部分上[⽹页⽂档的最上⽅距离屏幕最上⽅的距离，但FF不⽀持，Chrom,IE,Opera表现都不同，慎⽤]window.screenLeft - ⽹页正⽂部分左[⽹页⽂档的最左⽅距离屏幕最左⽅的距离，但FF不⽀持，Chrom,IE,Opera表现都不同，慎⽤]window.screen.height - 屏幕分辨率的⾼度window.screen.width - 屏幕分辨率的宽度window.screen.availHeight - 可⽤⼯作区⾼度[整个屏幕但不包括下⽅任务栏]window.screen.availWidth - 可⽤⼯作区宽度[整个屏幕的宽度]window.screen.clorDepth - 屏幕⾊彩，常⽤的16,32位等window.screen.deviceXDPI - 屏幕像素/英⼨【IE⽀持，其它不⽀持】JavaScript 获取页⾯宽⾼的⽅法<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.clientWidthdocument.body.clientHeight即可获得，很简单，很⽅便。

标题：如何使用JavaScript获取浏览器窗口标识在Web开发中，有时候我们需要获取浏览器窗口的一些标识，比如窗口的宽度、高度，或者用户滚动的位置等。

在这篇文章中，我将会介绍几种使用JavaScript获取浏览器窗口标识的方法，希望对大家有所帮助。

一、获取浏览器窗口的宽度和高度在很多情况下，我们希望能够获取浏览器窗口的宽度和高度，以便在网页布局中进行相应的调整。

使用JavaScript可以很轻松地实现这一功能，下面是具体的代码：```javascript// 获取浏览器窗口的宽度var windowWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;// 获取浏览器窗口的高度var windowHeight = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;上面的代码中，我们首先尝试使用window.innerWidth和window.innerHeight来获取浏览器窗口的宽度和高度，如果这两个属性不被支持，我们就使用document.documentElement.clientWidth和document.documentElement.clientHeight，最后使用document.body.clientWidth和document.body.clientHeight。

这样一来，我们就可以兼容大多数浏览器，获取到准确的窗口宽度和高度。

二、监听浏览器窗口的变化有些时候，我们希望能够在浏览器窗口大小发生变化的时候做出相应的处理，比如重新布局页面或者加载不同尺寸的图片。

这时候，我们可以使用JavaScript来监听浏览器窗口resize事件，下面是具体的代码：```javascriptwindow.addEventListener('resize', function() {// 当浏览器窗口大小发生变化时，执行相应的操作console.log('Window size changed');});上面的代码中，我们使用addEventListener方法来监听窗口的resize 事件，当窗口大小发生变化时，就会执行相应的操作。

javascript获取⽹页各种⾼宽及位置的⽅法总结screen对象获取屏幕的⾼宽（分辨率）screen.width //屏幕的宽screen.height //屏幕的⾼screen.availWidth //屏幕可⽤宽度屏幕的像素⾼度减去系统部件⾼度之后的值screen.availHeight //屏幕可⽤⾼度屏幕的像素宽度减去系统部件宽度之后的值window对象获得窗⼝位置及⼤⼩window.screenTop //窗⼝顶部距屏幕顶部的距离window.screenLeft //窗⼝左侧距屏幕左侧的距离window.innerWidth //窗⼝中可视区域(viewpoint)的宽度alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366window.innerHeight //窗⼝中可视区域(viewpoint)的⾼度该值与浏览器是否显⽰菜单栏等因素有关alert(window.innerHeight); //chrome 643 ff 657 ie 673window.outerWidth //浏览器窗⼝本⾝的宽度(可视区域宽度+浏览器边框宽度)alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382//说明chrome在最⼤化时浏览器窗⼝没有边框宽度,⾮最⼤化时有8px边框//ff和ie上下左右有8px的边框宽度window.outerHeight //浏览器窗⼝本⾝的⾼度alert(window.outerHeight); //chrome 728 ff 744 ie 744element对象在介绍element对象各种⾼宽之前有必要解释⼀下盒模型默认盒模型 box-sizing:content-box;boxWidth = 2*margin + 2*border + 2*padding + widthboxHeight = 2*margin + 2*border + 2*padding + height当不出现滚动条时body{margin:0;}#demo{width:100px;height:100px;padding:10px;border:20px;margin:30px;background-color:red;}<div id="demo">123456789 123456789</div>clientWidth:在页⾯上返回内容的可视宽度（不包括边框，边距或滚动条）clientHeight:在页⾯上返回内容的可视⾼度（不包括边框，边距或滚动条）clientWidth = 2*padding + width - scrollbarWidthconsole.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0clientHeight = 2*padding + height - scrollbarHeightconsole.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0offsetWidth:返回元素的宽度包括边框和填充，但不包括边距offsetHeight:返回元素的⾼度包括边框和填充，但不包括边距offsetWidth = 2*border + 2*padding + widthconsole.log(document.getElementById('demo').offsetWidth) //160offsetHeight = 2*border + 2*padding + heightconsole.log(document.getElementById('demo').offsetHeight) //160offsetLeft: 获取对象相对于版⾯或由 offsetLeft属性指定的⽗坐标的计算左侧位置offsetTop: 获取对象相对于版⾯或由 offsetTop属性指定的⽗坐标的计算顶端位置console.log(document.getElementById('demo').offsetLeft) //30console.log(document.getElementById('demo').offsetTop) //30当出现滚动条时body{margin:0;padding:20px;width:1000px;height:500px;}<div id="demo">123456789123456789</div>scrollWidth: 返回元素的整个宽度（包括带滚动条的隐蔽的地⽅）scrollHeight: 返回整个元素的⾼度（包括带滚动条的隐蔽的地⽅）scrollWidth = 2*padding + widthconsole.log(document.body.scrollWidth) //1040scrollHeight = 2*padding + widthconsole.log(document.body.scrollHeight) //540scrollTop: 向下滑动滚动块时元素隐藏内容的⾼度。

js获取浏览器⾼度窗⼝⾼度元素尺⼨偏移属性的⽅法如下所⽰：screen.widthscreen.heightscreen.availHeight //获取去除状态栏后的屏幕⾼度screen.availWidth //获取去除状态栏后的屏幕⾼度⼀、通过浏览器获得屏幕的尺⼨⼆、获取浏览器窗⼝内容的尺⼨//⾼度window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight//宽度window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht/ ** window.innerHeight FF/CH ⽀持，获取窗⼝尺⼨。

* document.documentElement.clientHeight IE/CH⽀持* document.body.client 通过body元素获取内容的尺⼨* /三、滚动条⽀持的差异性不进⾏任何滚动条更改的页⾯，Firefox/IE 默认认为HTML元素具有滚动条属性。

⽽body不具有。

但Chrome 则认为body是具有滚动条属性的。

因此兼容性的写法是：document.documentElement.scrollTop || document.body.scrollTop四、获取元素的尺⼨elemnt.offsetWidthelemnt.offsetHeight// 仅IE5不⽀持，放⼼使⽤吧说明图：* offsetWidth 可以获取元素的⾼度尺⼨，包括：width + padding[left,right] + border[left,right]* offsetHeight 可以获取元素的宽度尺⼨，包括：height + padding[top,bottom] + bottom[top,bottom]五、元素的偏移属性element.offsetTop //获取元素与其偏移参考⽗元素顶部的间隔距离element.offsetLeft //获取元素与其偏移参考⽗元素左边的间隔距离element.offsetParent //获取当前元素的参考⽗元素*offsetTop 可以获取元素距其上⼀级的偏移参考⽗元素顶部的距离。