jquery获取div的宽度与高度的方法教程
墨初 前端设计 2069阅读
一般来说div元素的宽度与高度是指的内容宽度与高度，但在CSS样式排版时要考虑到DIV元素的 padding、border 与 margin 属性定义的的宽度与高度。而在jq代码获取div元素的高度与宽度时同样也要考虑这么样式属性定义的高度与宽度！
jq获取DIV元素高度与宽度的方法
1、jq获取元素内容的高度与宽度的方法
jq元素内容的宽与高，直接使用 width() 与 heigth() 方法即可！
$('div').width();
$('div').height();2、jq获取带有 padding 属性的高度与宽度的方法
jq 中的 innerWidth() 与 innerHeight() 方法可以获取带有 padding 属性的宽与高
$('div').innerWidth();
$('div').innerHeight();3、jq获取带有 padding + border 属性的高度与宽度的示例
jq outerWidth() 与 outerHeight() 方法获取 带有 padding + borde 属性的宽与高的值
$('div').outerWidth();
$('div').outerHeight();4、jq获取带有 padding + border + margin 属性的高度与宽度方法
jq 给 outerWidth() 与 outerHeight() 方法加入一个参数 true，可以获取到带有 margin 属性的宽度值与高度值！
$('div').outerWidth(true);
$('div').outerHeight(true);jq获取div元素高与宽的完整示例代码
注：代码复制到本地可运行查看！
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
<title>示例代码-飞鸟慕鱼博客</title>
<style>
div{
display:inline-block;
width:100px;
height:60px;
padding:20px 10px;
border:2px solid red;
margin: 20px 30px;
}
</style>
</head>
<body>
<div class="div1">飞鸟慕鱼博客</div>
<script>
//内容的高度与宽度
console.log($('div').width()); //100
console.log($('div').height()); //60
//带有 padding 属性的高度与宽度
console.log($('div').innerWidth()); //100 + 10 + 10 = 120
console.log($('div').innerHeight()); //60 + 20 + 20 = 100
//带有 padding + border 属性的高度与宽度
console.log($('div').outerWidth()); //100 + 10 + 10 + 2 + 2 = 124
console.log($('div').outerHeight()); //60 + 20 + 20 + 2 + 2 = 104
//带有 padding + border + margin 属性的高度与宽度
console.log($('div').outerWidth(true)); //100 + 10 + 10 + 2 + 2 + 30 + 30 = 184
console.log($('div').outerHeight(true)); //60 + 20 + 20 + 2 + 2 + 20 + 20 = 144
</script>
</body>
</html>