一般来说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>