码迷,mamicode.com
首页 > 其他好文 > 详细

height/innerHeight/outerHeight

时间:2015-03-17 12:31:10      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

<script>
$(document).ready(function(){
    alert("height:"+$("#div").height());   //20px; height属性值
    alert("innerHeight:"+$("#div").innerHeight());//30px; height属性值+padding属性值*2
    alert("outerHeight:"+$("#div").outerHeight()); //34px;height属性值+(padding属性值+border属性值)*2
    alert("outerHeight(true):"+$("#div").outerHeight(true));//50px;height属性值+(padding属性值+border属性值+margin属性值)*2
});
</script>
</head>
<body>
    <div id="div" style="height: 20px;border: 2px solid;padding: 5px;margin: 8px;width: 20px;"></div>

</body>

其中height:高度
innerHeight:高度+补白(padding)
outerHeight:高度+补白+边框
outerHeight(true):高度+补白+边框+边距

height/innerHeight/outerHeight

标签:

原文地址:http://blog.csdn.net/colorsunlight/article/details/44338947

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!