zoukankan      html  css  js  c++  java
  • 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文档的标签,所以也可表示为:

    document.body.clientHeight:表示HTML文档所在窗口的当前高度;

    document.body.clientWidth:表示HTML文档所在窗口的当前宽度;

    结论:

    document.body.clientWidth/Height:的宽高偏小,高甚至默认200;

    document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。

    所以在不同浏览器都实用的的Javascripit方案:

    1.var w = document.documentElement.clientWidth || document.body.clientWidth;
    2.var h = document.documentElement.clientHeight || document.body.clientHeight;
    

    二:网页正文全文宽高

    scrollWidth和scrollHeight获取网页内容高度和宽度

    1.针对IE.Opera:scrollHeight是网页内容实际高度,可以小于clientHeight;

    2.针对NS.firefox:scrollHeight是网页内容高度,不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候,scrollHeight返回clientHeight;

    3.浏览器兼容代码:

    1.var w = document.documentElement.scrollWidth || document.body.scrollWidth;
    2.var h = document.documentElement.scrollHeight || document.body.scrollHeight;
    

    三:网页可见区域宽高,包括滚动条等边线(会随窗口的显示大小改变)

    1.值:

    offsetWidth = scrollWidth + 左右滚动条 +左右边框;

    offsetHeight = scrollHeight + 上下滚动条 + 上下边框;

    2.浏览器兼容代码:

    1.var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
    2.var h = document.documentElement.offsetHeight || document.body.offsetHeight ;
    
    

    四:网页卷去的距离与偏移量

    1.scrollLeft:

    设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离;

    2.scrollTop:

    设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离;

    3.offsetLeft:

    设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置;

    4.offsetTop:

    设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置;

  • 相关阅读:
    服务器IIS禁止通过IP访问
    如何自定义Kubernetes资源
    敏捷 | 无处不在的敏捷思想应用
    敏捷 | 如何做好服务型Scrum Master?
    敏捷 | 如何填好推进的坑?
    敏捷 | 如何正确推进敏捷?
    敏捷 | 如何正确理解敏捷?
    管理 |《技术管理案例课》学习总结(下)
    管理 |《技术管理案例课》学习总结(上)
    《ArcGIS 从基础到实战》书正式出版
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13806940.html
Copyright © 2011-2022 走看看