Jquery获取元素宽度和高度的多种方法,可包含padding margin

首先,利用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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/266.html