您的位置：首页 > Web前端 > jquery > 正文

jQuery中height()、innerheight()、outerheight()的区别

更多时间：2016-3-30 类别：Web前端浏览量：735

jQuery中height()、innerheight()、outerheight()的区别

jQuery中height()、innerheight()、outerheight()的区别

一、jQuery 中 height()

获取匹配元素集合中的第一个元素的当前计算高度值，总是返回内容宽度

二、jQuery 中 innerheight()

包括padding，但是不包括border，即： height + padding

三、jQuery 中 outerheight()

包括padding，border，即：height + padding + border

四、jQuery 中 outerheight(true)

包括padding，border和margin,即： height + padding + border + margin

五、height()、innerheight()、outerheight()的实例


    <li id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></li>

    <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>

标签：jquery

上一篇：移动端获取点击坐标

下一篇：jquery遍历json字符串

您可能感兴趣

jQuery中height()、innerheight()、outerheight()的区别

jQuery中height()、innerheight()、outerheight()的区别

热门推荐

排行榜