原创
js-浏览器窗口框宽高、宽度、高度及位置示意图

获取浏览器几种窗口的宽度：$(document).ready(function(){
 
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border、padding margin
})

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异 网页可见区域宽：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  //当offsetWidth 获取不到值时尝试使用这个屏幕可用工作区宽度：window.screen.availWidth
 window.screen.availWidth = 1080  //像分辨率 document.body.clientWidth = 360  //像像素（实际计算时用于获取屏幕宽度） document.body.offsetWidth = 360  //像像素（实际计算时用于获取屏幕宽度） window.innerWidth = 360  //像像素（像素单位 IE不支持） window.screen.width= 1080  //像分辨率
实际在计算过程如果需要屏幕宽度，还是使用document.body.clientWidth;这个值准确，也可以设置div的宽度100%后，再读取这个div的宽度
最终function getOffsetTopByjQ() {//可以通过在底部设置一个绝对定位的线条来获取整个页面的高度	return $("selector").offset().top;}//获取滚动条滚动的垂直距离-废弃function getScrollTopDeprecated() { //20180728 这个可能存在兼容问题	return document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;}//获取滚动条滚动的垂直距离function getScrollTop() { // 还需要测试具体兼容性var scrollTop = (window.parent.document.documentElement.scrollTop || window.parent.document.body.scrollTop) || (document.body.scrollTop + document.documentElement.scrollTop) || (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0)	return scrollTop;}
function getScreenWidth() { //不随浏览器宽口大小变化而变化	var _screenWidth = screen.width;	return _screenWidth;}function getScreenHeight() { //不随浏览器宽口大小变化而变化	var _screenHeight = screen.height;	return _screenHeight;}function getWindowWidth() { //随浏览器宽口大小变化而变化	var _windowWidth = document.body.clientWidth || document.body.offsetWidth || document.documentElement.clientWidth; //像像素（实际计算时用于获取屏幕高度 兼容IE）	return _windowWidth;}function getWindowHeight() { //随浏览器宽口大小变化而变化 也可换成 $(window).height()	var _windowHeight = document.body.clientHeight || document.body.offsetHeight || document.documentElement.clientHeight; //像像素（实际计算时用于获取屏幕高度 兼容IE）	return _windowHeight;}使用时在不同屏幕尺寸上打印并实际测试一下！
这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。clientHeight四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。scrollHeightIE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。简单地说clientHeight 就是透过浏览器看内容的这个区域高度。NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
注：以上也是转的，对自己有点参考而已，有些值要跟据页面方式而定！我用的Ajax就完全没法用上面的方法定高！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
在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
正文到此结束
所属分类：前端基础
本文标签： JavaScript
本文链接： https://code.jiangjiesheng.cn/article/108
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。
js-浏览器窗口框宽高、宽度、高度及位置示意图

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息
