您的位置：首页 > 产品设计 > UI/UE

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

2015-06-24 12:37 471 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航