zoukankan      html  css  js  c++  java
  • jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西。

    在jQuery中,获取元素高度的函数有3个,它们分别是height()、 innerHeight()、outerHeight()。

    与此相对应的是,获取元素宽度的函数也有3个,它们分别是width()、 innerWidth()、outerWidth()。

    它们之间有什么区别呢?以下图盒模型为例:

    height():其高度范围是所匹配元素的高度height;

    innerheight():其高度范围是所匹配元素的高度height+padding;

    outerheight():其高度范围是所匹配元素的高度height+padding+border;

    outerheight(true)其高度范围是所匹配元素的高度height+padding+border+margin;

        <div id="element" style="margin:5px; padding:10px; 100px; height:100px; border:1px solid #000;"></div>
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
        var $ele = $("#element");
    
        // height() = height(100) = 100
        document.writeln($ele.height()); // 100
    
        // innerHeight() = height(100) + padding(10*2)= 120 
        document.writeln($ele.innerHeight()); // 120
    
        // outerHeight() = height(100) + padding(10*2) + border(1*2) = 122 
        document.writeln($ele.outerHeight()); // 122
    
        // outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 
        document.writeln($ele.outerHeight(true)); // 132
        </script>

    水平方向上宽度大小也是如此

  • 相关阅读:
    char *p = "abcdefg"; p[0] = p[1]出错
    最近在 OS-10.9下配置opencv, cgal, latex, qt, pillow
    Python文件操作
    Python字典和集合
    Python目录操作
    python处理中文(待补充)
    混合高斯模型
    随机生成某些稀疏矩阵
    matlab注释
    C#中int,string,char[],char的转换(待续)
  • 原文地址:https://www.cnblogs.com/jesse131/p/5111191.html
Copyright © 2011-2022 走看看