JS获取屏幕,浏览器,网页高度宽度
js获取网页屏幕可视区域高度
js获取⽹页屏幕可视区域⾼度document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象⾼度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域⾼度看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console⾥运⾏⼀下会发现在不同的⽹页中有不同的情况值，有的document.body.clientWidth和document.documentElement.clientWidth 的值相同，有的却不同，原因在哪呢？原因就是：在浏览器默认的情况下，body有8-10px左右的边距，⽽可见区域包括了这个边距，因此如果我们⽤到body{padding:0;margin:0;}来消除这种默认的情况。
那么document.body.clientWidth和document.documentElement.clientWidth 的值就会相同。
以下是兼容主流浏览器（IE/Firefox/Chrome/Safari）获取浏览器窗⼝可视区域（不包括滚动条）和滚动条位置的代码：1 // 获取浏览器窗⼝的可视区域的宽度2 function getViewPortWidth() {3 return document.documentElement.clientWidth || document.body.clientWidth;4 }56 // 获取浏览器窗⼝的可视区域的⾼度7 function getViewPortHeight() {8 return document.documentElement.clientHeight || document.body.clientHeight;9 }1011 // 获取浏览器窗⼝⽔平滚动条的位置12 function getScrollLeft() {13 return document.documentElement.scrollLeft || document.body.scrollLeft;14 }1516 // 获取浏览器窗⼝垂直滚动条的位置17 function getScrollTop() {18 return document.documentElement.scrollTop || document.body.scrollTop;19 }⽹页可见区域宽： document.body.offsetWidth (包括边线的宽)⽹页可见区域⾼： document.body.offsetHeight (包括边线的⾼)⽹页正⽂部分上： window.screenTop⽹页正⽂部分左： window.screenLeft屏幕分辨率的⾼： window.screen.height屏幕分辨率的宽： window.screen.width屏幕可⽤⼯作区⾼度： window.screen.availHeight屏幕可⽤⼯作区宽度： window.screen.availWidth// 部分jQuery函数$(window).height() //浏览器时下窗⼝可视区域⾼度$(document).height() //浏览器时下窗⼝⽂档的⾼度$(document.body).height() //浏览器时下窗⼝⽂档body的⾼度$(document.body).outerHeight(true) //浏览器时下窗⼝⽂档body的总⾼度包括border padding margin$(window).width() //浏览器时下窗⼝可视区域宽度$(document).width()//浏览器时下窗⼝⽂档对于象宽度$(document.body).width() //浏览器时下窗⼝⽂档body的⾼度$(document.body).outerWidth(true) //浏览器时下窗⼝⽂档body的总宽度包括border paddingHTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidthscrollHeight: 获取对象的滚动⾼度。
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数
s+="网页正文部分上："+window.screenTop+"\n";
s+="网页正文部分左："+window.screenLeft+"\n";
s+="屏幕分辨率的高："+window.screen.height+"\n";
if(self.innerHeight){// all except Explorer
windowHeight=self.innerHeight;
}elseif(document.documentElement&&document.documentElement.clientHeight){
// Explorer 6 Strict Mode
}else{
xScroll=document.body.offsetWidth;
}
varwindowWidth
if(self.innerHeight){// all except Explorer
windowWidth=self.innerWidth;
}elseif(document.documentElement&&document.documentElement.clientHeight){// Explorer 6 Strict Mode
s+="网页可见区域高："+document.body.clientHeight+"\n";
【IT专家】js 获取浏览器高度和宽度值(多浏览器)
本文由我司收集整编，推荐下载，如有疑问，请与我司联系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获取网页宽高方法汇总
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即可获得，很简单，很⽅便。
js获取浏览器窗口标识的方法
标题：如何使用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 事件，当窗口大小发生变化时，就会执行相应的操作。
js获取屏幕高度浏览器高度
js获取屏幕⾼度浏览器⾼度1、window.screen.heightwindow.screen.height：设备显⽰屏的⾼度（1）分辨率为1080px的显⽰屏（2）⼿机屏2、window.screen.availHeight屏幕的可⽤⾼度（1）分辨率为1080px的显⽰屏（2）⼿机屏3、document.body.clientHeight当前⽂档中的元素的⾼度body⾼度为3000px的页⾯：<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>Document</title></head><body><div style="height: 3000px;"></div></body></html>（1）PC端（2）⼿机端4、document.documentElement.clientHeightDocument.documentElement 是⼀个会返回⽂档对象（）的根的只读属性（如HTML⽂档的 <html> 元素）document.documentElement.clientHeight返回html的可⽤⾼度。
document.documentElement 返回的是html。
javascript获取网页各种高宽及位置的方法总结
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获取浏览器高度窗口高度元素尺寸偏移属性的方法
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 可以获取元素距其上⼀级的偏移参考⽗元素顶部的距离。
js获取浏览器和屏幕的各种宽度高度
js获取浏览器和屏幕的各种宽度⾼度⼀：⽹页可见区域宽⾼，不包括⼯具栏和滚动条（浏览器窗⼝可视区域⼤⼩）1.对于IE9+、chrome、firefox、Opera、Safari：window.innerHeight浏览器窗⼝的内部⾼度；window.innerWidth浏览器窗⼝的内部宽度；2.对于IE8.7.6.5:document.documentElement.clientHeight:表⽰HTML⽂档所在窗⼝的当前⾼度；document.documentElement.clientWidth:表⽰HTML⽂档所在窗⼝的当前宽度；或者，因为document对象的body属性对应HTML⽂档的<body>标签，所以也可表⽰为：document.body.clientHeight：表⽰HTML⽂档所在窗⼝的当前⾼度；document.body.clientWidth：表⽰HTML⽂档所在窗⼝的当前宽度；结论：document.body.clientWidth/Height：的宽⾼偏⼩，⾼甚⾄默认200；document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽⾼始终相等。
所以在不同浏览器都实⽤的的Javascripit⽅案：var w = document.documentElement.clientWidth || document.body.clientWidth;var h = document.documentElement.clientHeight || document.body.clientHeight;⼆：⽹页正⽂全⽂宽⾼scrollWidth和scrollHeight获取⽹页内容⾼度和宽度1.针对IE.Opera：scrollHeight是⽹页内容实际⾼度，可以⼩于clientHeight;2.针对NS.firefox：scrollHeight是⽹页内容⾼度，不过最⼩值是clientHeight;也就是说⽹页内容实际⾼度⼩于clientHeight的时候，scrollHeight返回clientHeight；3.浏览器兼容代码：var w = document.documentElement.scrollWidth || document.body.scrollWidth;var h = document.documentElement.scrollHeight || document.body.scrollHeight;⼆：⽹页可见区域宽⾼，包括滚动条等边线（会随窗⼝的显⽰⼤⼩改变）1.值： offsetWidth = scrollWidth + 左右滚动条 +左右边框； offsetHeight = scrollHeight + 上下滚动条 + 上下边框；2.浏览器兼容代码：var w = document.documentElement.offsetWidth || document.body.offsetWidth ;var h = document.documentElement.offsetHeight || document.body.offsetHeight ;三：⽹页卷去的距离与偏移量1.scrollLeft:设置或获取位于给定对象左边界与窗⼝中⽬前可见内容的最左端之间的距离；2.scrollTop:设置或获取位于给定对象最顶端与窗⼝中⽬前可见内容的最左端之间的距离；3.offsetLeft:设置或获取位于给定对象相对于版⾯或由offsetParent属性指定的⽗坐标的计算左侧位置；4.offsetTop:设置或获取位于给定对象相对于版⾯或由offsetParent属性指定的⽗坐标的计算顶端位置；以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。
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复制代码代码如下:<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获取浏览器和屏幕各种高度宽度
海文国际（上海海文信息技术有限公司）
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); //屏幕可用工作区的宽。
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;设定，这时再去获取任意元素的宽高，各浏览器都会是一致的。
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.availWidthHTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidthscrollHeight: 获取对象的滚动高度。
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 + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5：clientWidth = width - borderclientHeight = height - borderoffsetWidth = widthoffsetHeight = 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对象关于窗口的一些属性，这些属性的主要功能和用法如下。
js获取页面高度,宽度
js获取页面高度,宽度关于获取各种浏览器可见窗口大小的一点点研究在我本地测试当中：在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。
而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊如果在页面中添加这行标记的话在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高）。
jsjquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
jsjquery获取浏览器窗⼝可视区域⾼度和宽度以及滚动条⾼度实现代码获取浏览器窗⼝的可视区域⾼度和宽度,滚动条⾼度有需要的朋友可参考⼀下。
IE中，浏览器显⽰窗⼝⼤⼩只能以下获取：代码如下复制代码复制代码代码如下:document.body.offsetWidthdocument.body.offsetHeight在声明了DOCTYPE的浏览器中，可以⽤以下来获取浏览器显⽰窗⼝⼤⼩：代码如下复制代码复制代码代码如下:document.documentElement.clientWidthdocument.documentElement.clientHeightIE，FF，Safari皆⽀持该⽅法，opera虽⽀持该属性，但是返回的是页⾯尺⼨；同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以⽤以下获取：代码如下复制代码复制代码代码如下:window.innerWidthwindow.innerHeight整个⽹页尺⼨⼀般获得⽅法代码如下复制代码复制代码代码如下:document.body.scrollWidthdocument.body.scrollHeight屏幕分辨率⾼度⼀般获得⽅法代码如下复制代码复制代码代码如下:window.screen.heightwindow.screen.width总结⼀下实例复制代码代码如下:function getViewSizeWithoutScrollbar(){//不包含滚动条return {width : document.documentElement.clientWidth,height: document.documentElement.clientHeight}}function getViewSizeWithScrollbar(){//包含滚动条if(window.innerWidth){return {width : window.innerWidth,height: window.innerHeight}}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){return {width : document.documentElement.offsetWidth,height: document.documentElement.offsetHeight}}else{return {width : document.documentElement.clientWidth + getScrollWith(),height: document.documentElement.clientHeight + getScrollWith()}}}IE，FireFox 差异如下：IE6.0、FF1.06+：复制代码代码如下:clientWidth = width + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5：clientWidth = width - borderclientHeight = height - borderoffsetWidth = widthoffsetHeight = height另附个⼈最常⽤的获取整页宽⾼的⽅法（需要jquery框架）代码如下复制代码复制代码代码如下:$(document).width() < $('body').width() ? $(document).width() : $('body').width();$(document).height() < $('body').height() ? $(document).height() : $('body').height();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 alert($(document).scrollTop()); //获取滚动条到顶部的垂直⾼度alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度。
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 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: 获取对象的滚动高度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：doபைடு நூலகம்ument.body.scrollLeft
网页正文部分上：window.screenTop
height:auto !important; height:663px; min-height:663px !important;
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离