比较height()，innerHeight()，outerHeight()和outerHeight(true)

最新推荐文章于 2021-12-19 00:06:49 发布

吴杼恩

最新推荐文章于 2021-12-19 00:06:49 发布

阅读量712

点赞数 1

分类专栏： jquery 文章标签：比较height innerHeight outerHeight和outerHei

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/46620557

版权

jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

对比jq中获取元素高度的几个函数(宽度同解)：height()，innerHeight()，outerHeight()和outerHeight(true)。
height():元素内容的高度，即盒模型中的content高度；
innerHeight()：content高度+padding上下高度；
outerHeight()：content高度+padding上下高度+边框上下高度；
outerHeight(true)：content高度+padding上下高度+边框上下高度+margin上下高度；

注意：只有outerHeight()函数可带有参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
  .bb{margin: 5px;border: 10px blue solid ;padding: 100px;}




  </style>


  <script>
  $(function(){


alert($(".bb").height()+"            "+$(".bb").innerHeight()+"      "+$(".bb").outerHeight()+"      "+$(".bb").outerHeight(true))

  })
  </script>
</head>
<body>
<div style="margin-top:1000px; width:600px;heigth:500px;background: yellow">
<div class="cc" >
  <div class="bb" style="width:500px;height:500px;background:red">
  5555


  </div>
</div>
</div>
</body>
</html>

吴杼恩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
比较height()，innerHeight()，outerHeight()和outerHeight(true)

对比jq中获取元素高度的几个函数(宽度同解)：height()，innerHeight()，outerHeight()和outerHeight(true)。height():元素内容的高度，即盒模型中的content高度；innerHeight()：content高度+padding上下高度；outerHeight()：content高度+padding上下高度+边框上下高度；ou
复制链接

扫一扫