zoukankan      html  css  js  c++  java
  • jquery获取元素各种宽高及页面宽高

    jquery获取元素各种宽高及页面宽高

    一、总结

    一句话总结:

    $(document).width();:获取页面的文档宽度
    $(window).width();:获取浏览器显示区域(可视区域)的宽度
    $(document.body).width();:浏览器当前窗口文档body的宽度
    $(document).scrollLeft();:获取滚动条到左边的水平宽度

    1、元素的四种宽度?

    a = $("#div").width(),//width()返回元素的宽,不包括padding/border/margin
    b = $("#div").innerWidth(),//innerWidth()返回元素的宽 + padding
    c = $("#div").outerWidth(),//outerWidth()返回元素的宽 + padding + border
    d = $("#div").outerWidth(true);//outerWidth(true)返回元素宽 + padding + border + margin

    二、jquery获取元素各种宽高及页面宽高总结

    转自或参考:jquery获取元素各种宽高及页面宽高总结
    https://www.cnblogs.com/goloving/p/7113567.html

    window.onload=function(){
        var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin
            b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding
            c = $("#div").outerWidth(),//outerWidth()返回元素的宽高 + padding + border
            d = $("#div").outerWidth(true);//outerWidth(true)返回元素宽高 + padding + border + margin
        console.log(a,b,c,d);
    }
    获取浏览器显示区域(可视区域)的高度 :   
    $(window).height();   
    获取浏览器显示区域(可视区域)的宽度 :
    $(window).width();   
    获取页面的文档高度   
    $(document).height();   
    获取页面的文档宽度 :
    $(document).width(); 
    浏览器当前窗口文档body的高度:  
    $(document.body).height();
    浏览器当前窗口文档body的宽度: 
    $(document.body).width();
    获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
    $(document).scrollTop();   
    获取滚动条到左边的垂直宽度 :
    $(document).scrollLeft(); 
    获取或设置元素的宽度:
    $(obj).width();
    获取或设置元素的高度:
    $(obj).height();
    某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
    某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
    返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
    返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)
     
  • 相关阅读:
    Swift
    遇到奇怪的问题,帮助威猛答案,表单提交的文件提交的无限数据问题
    对于思考小端和大端字节顺序
    圈真的决定你的未来?
    坦克大战
    android visible invisible和gone差异
    编程之美2: 二进制重建
    WCF分布式事务(EF)
    Android+NDK+OpenGLES开发环境配置
    struts2和struts1认识
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/11645447.html
Copyright © 2011-2022 走看看