zoukankan      html  css  js  c++  java
  • jquery获取浏览器各种高宽

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




    原生JS

    document.body.clientWidth;        //网页可见区域宽(body)
    
    document.body.clientHeight;       //网页可见区域高(body)
    
    document.body.offsetWidth;       //网页可见区域宽(body),包括border、margin等
    
    document.body.offsetHeight;      //网页可见区域宽(body),包括border、margin等
    
    document.body.scrollWidth;        //网页正文全文宽,包括有滚动条时的未见区域
    
    document.body.scrollHeight;       //网页正文全文高,包括有滚动条时的未见区域
    
    document.body.scrollTop;           //网页被卷去的Top(滚动条)
    
    document.body.scrollLeft;           //网页被卷去的Left(滚动条)
    
    window.screenTop;                     //浏览器距离Top
    
    window.screenLeft;                     //浏览器距离Left
    
    window.screen.height;                //屏幕分辨率的高
    
    window.screen.width;                 //屏幕分辨率的宽
    
    window.screen.availHeight;          //屏幕可用工作区的高
    
    window.screen.availWidth;           //屏幕可用工作区的宽

    Jquery

    $(window).height();                           //浏览器当前窗口可视区域高度
    
    $(document).height();                        //浏览器当前窗口文档的高度
    
    $(document.body).height();                //浏览器当前窗口文档body的高度
    
    $(document.body).outerHeight(true);  //浏览器当前窗口文档body的总高度 包括border padding margin
    
    $(window).width();                            //浏览器当前窗口可视区域宽度
    
    $(document).width();                        //浏览器当前窗口文档对象宽度
    
    $(document.body).width();                //浏览器当前窗口文档body的宽度
    
    $(document.body).outerWidth(true);  //浏览器当前窗口文档body的总宽度 包括border padding margin
  • 相关阅读:
    数字视频基础(四) 分类: 生活百科 2014-07-01 11:19 388人阅读 评论(0) 收藏
    数字视频基础(三) 分类: 生活百科 2014-07-01 11:19 357人阅读 评论(0) 收藏
    数字视频基础(二) 分类: 生活百科 2014-07-01 11:18 398人阅读 评论(0) 收藏
    数字视频基础(一) 分类: 生活百科 2014-07-01 11:17 345人阅读 评论(0) 收藏
    PCI-X总线 分类: 浅谈PCI 2014-07-01 08:28 697人阅读 评论(2) 收藏
    Mfc Tips
    windows 桌面开发 (zz)
    备 忘
    编程坑爹的注意
    虚拟机安装后的基本操作
  • 原文地址:https://www.cnblogs.com/fengwenzhee/p/10095894.html
Copyright © 2011-2022 走看看