zoukankan      html  css  js  c++  java
  • 各种浏览器的可见性

    <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 += "网页被卷去的高:"+ document.body.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 +" 像素/英寸";
    }
    </script>
    在我本地测试当中:
    IE、
    FireFox、Opera下都可以使用
    document.body.clientWidth
    document.body.clientHeight

    即可获得,很简单,很方便。
     
    而在公司项目当中:
    Opera仍然使用
    document.body.clientWidth
    document.body.clientHeight

    可是IE和FireFox则使用
    document.documentElement.clientWidth
    document.documentElement.clientHeight
     
    原来是W3C的标准在作怪啊
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    如果在页面中添加这行标记的话

    在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 ==> 0
    document.documentElement.clientHeight ==> 0
     
    FireFox为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
     
    Opera为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    关于获取各种浏览器滚动条的高度

    在这里提供一个函数,作为参考
    var w3c=(document.getElementById)? true: false;
    var agt=navigator.userAgent.toLowerCase();
    var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
    
    function IeTrueBody(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
    }
    
    function GetScrollTop(){
        return ie ? IeTrueBody().scrollTop : window.pageYOffset;
    }
  • 相关阅读:
    Windows 科研软件推荐
    有关Python 包 (package) 的基本知识
    《Using Python to Access Web Data》Week4 Programs that Surf the Web 课堂笔记
    Coursera助学金申请模板
    《Using Databases with Python》 Week2 Basic Structured Query Language 课堂笔记
    Jupyter 解决单个变量输出问题
    解决 pandas 中打印 DataFrame 行列显示不全的问题
    《Using Python to Access Web Data》 Week3 Networks and Sockets 课堂笔记
    缓存击穿及解决方案
    jvm垃圾收集器
  • 原文地址:https://www.cnblogs.com/CoderWayne/p/4485524.html
Copyright © 2011-2022 走看看