• 保存到桌面  加入收藏  设为首页
HTML5

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

时间:2017-09-19 16:49:06   作者:江节胜   来源:胜行天下   阅读:393   评论:0

获取浏览器几种窗口的宽度:

$(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的宽度

 

 

最终

var screenHeight = document.body.clientHeight || document.body.offsetHeight || document.documentElement.clientHeight; //像像素(实际计算时用于获取屏幕高度 兼容IE

 

使用时在不同屏幕尺寸上打印并实际测试一下!

 

 

这里说说四种浏览器对 document.body clientHeightoffsetHeight scrollHeight 的解释。

这四种浏览器分别为IEInternet Explorer)、NSNetscape)、OperaFFFireFox)。

clientHeight

四种浏览器对 clientHeight 的解释都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight

IEOpera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NSFF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight

scrollHeight

IEOpera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight

NSFF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NSFF 认为 offsetHeight scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight

IEOpera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidthoffsetWidth 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

 

IEFireFoxOpera下都可以使用

document.body.clientWidth

document.body.clientHeight

即可获得,很简单,很方便。

而在公司项目当中:

Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IEFireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


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


  

有任何疑问或技术合作都可联系我

微信:767000122 【推荐】

QQ:596957738


相关评论

加我微信 596957738 (QQ同号)加我微信   QQ联系:596957738   地址:江苏省南京市雨花台区

苏公网安备32011402010305号

皖ICP备16019989号

江节胜的Gitee,江节胜的Git地址