zoukankan      html  css  js  c++  java
  • js获取页面高度

    <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.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高) 
    真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

  • 相关阅读:
    黄聪:Jquerry如何深拷贝对象
    黄聪:IIS7下wordpress上传大文件(30M以上)提示404页面失败的解决方法
    黄聪:Vue的list根据index序号删除元素
    php防止视频资源被下载
    前端Jquery-Ajax跨域请求,并携带cookie
    完美验证码识别系统,验证码插件使用帮助文档
    C#截图操作(几种截图方法)
    最全各种系统版本的XPosed框架资料下载整理
    wp.editor.initialize 配置案例
    黄聪:wordpress登录后台后load-scripts.php载入缓慢
  • 原文地址:https://www.cnblogs.com/chenghu/p/3777849.html
Copyright © 2011-2022 走看看