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

首先,利用Jquery获取元素的高度。 height()方法用于获得元素高度; innerHeight()方法用于获得包括内边距(padding)的元素高度; outerHeight()方法用于获得包括内边距(padding)和边...

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

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章