首先,利用Jquery获取元素的高度。
height()方法用于获得元素高度;
innerHeight()方法用于获得包括内边距(padding)的元素高度;
outerHeight()方法用于获得包括内边距(padding)和边框(border)的元素高度;
outerWidth(true)方法用于获得包括内边距(padding)和边框(border)和外边距(margin)的元素高度。
同理,width(),innnerWidth(),outerWidth(),outerWidth(true)同样能获得不同的元素宽度。
用一个例子更直观得看4种获取不同高度的方式:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<style>
body { margin:0; }
.div1 { width:200px; height:150px; margin-bottom:20px; padding:10px; background:yellow; }
.div2 { width:300px; height:200px; margin-bottom:10px; background:red; }
.div3 { width:160px; height:160px; margin-bottom:5px; border:1px solid red; background:blue; }
</style>
<script>
$(function(){
var divHeight1 = $('.div1').height();
var divHeight2 = $('.div2').height();
var divHeight3 = $('.div3').height();
$('.div1').append('div1的高度是' + divHeight1 + '<br/>');
$('.div2').append('div2的高度是' + divHeight2 + '<br/>');
$('.div3').append('div3的高度是' + divHeight3 + '<br/>');
var divInnerHeight1 = $('.div1').innerHeight();
var divInnerHeight2 = $('.div2').innerHeight();
var divInnerHeight3 = $('.div3').innerHeight();
$('.div1').append('div1的InnerHeight是' + divInnerHeight1 + '<br/>');
$('.div2').append('div2的InnerHeight是' + divInnerHeight2 + '<br/>');
$('.div3').append('div3的InnerHeight是' + divInnerHeight3 + '<br/>');
var divOuterHeight1 = $('.div1').outerHeight();
var divOuterHeight2 = $('.div2').outerHeight();
var divOuterHeight3 = $('.div3').outerHeight();
$('.div1').append('div1的OuterHeight是' + divOuterHeight1 + '<br/>');
$('.div2').append('div2的OuterHeight是' + divOuterHeight2 + '<br/>');
$('.div3').append('div3的OuterHeight是' + divOuterHeight3 + '<br/>');
var divOuterHeightTrue1 = $('.div1').outerHeight(true);
var divOuterHeightTrue2 = $('.div2').outerHeight(true);
var divOuterHeightTrue3 = $('.div3').outerHeight(true);
$('.div1').append('div1的OuterHeight是' + divOuterHeightTrue1);
$('.div2').append('div2的OuterHeight是' + divOuterHeightTrue2);
$('.div3').append('div3的OuterHeight是' + divOuterHeightTrue3);
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>