浅谈JQurey对元素的宽高操作（1）

JQ给我们提供了很多的方便快捷的API，今天跟大家扯一扯获取圆度宽高的操作。

先说明一下文章中用得到的参数的解说：

1、width、height：指的是css里面设置的值

2、padding、border、margin：css设置或者浏览器内核自带的

JQurey获取元素宽度：

1、.width(); 获取的值：width

获取的是CSS设置的宽度或者自带的宽度，.width();获取的时候不考虑出来盒子自身的宽度知道的属性（例如：margin、padding、border）

2、.innerWidth(); 获取的值：width+padding

获取的是width+padding的值，这里不包含margin、border

3、.outerWidth(); 获取的值：width+padding+border

获取的是width+padding+border的值，这里不包含margin

4、.outerWidth(true); 获取的值：width+padding+border+margin

获取的是width+padding+border+margin的值。

其实这个JQ方法只是在.outerWidth();的括号里面加了个true而已，然后就能获取margin的大小了。

JQurey获取元素高度：（这个直接忽略，跟获取宽度一样）

1、.height(); 获取的值：height

2、.innerHeight(); 获取的值：height+padding

3、.outerHeight(); 获取的值：height+padding+border

4、.outerHeight(true); 获取的值：height+padding+border+margin

下面我写了一个例子，可以点击下方的在线演示来看：

下图是例子所用的到的盒子的基本信息。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="box">
    <p>height:200px;</p>
    <p>width:400px;</p>
    <p>margin:20px;</p>
    <p>padding:10px;</p>
    <p>border:5px solid #b45a3c;</p>
</div>
<div id="box_btn">
    <a>width() / height()方法</a>
    <a>innerWidth() / innerHeight()方法</a>
    <a>outerWidth() / outerHeight()方法</a>
    <a>outerWidth(true) / outerHeight(true)方法</a>
</div>
<style type="text/css">
    #box{ height:200px; width:400px; margin:20px; padding:10px; border:5px solid #b45a3c; background:#333; color:#fff; line-height:30px; font-size:14px;}
    p{ margin:0;}
    #box_btn a{ display:inline-block; border:1px solid #b45a3c; color:#333; margin:0 10px; padding:0 10px;}
</style>
<script type="text/javascript">
    var div_box = $('#box');
    var box_btns = $('#box_btn a');
    box_btns.click(function () {
        var cgl_index = $(this).index();
        if (cgl_index==0){
            alert('宽度:'+div_box.width() + '\n高度：'+ div_box.height() + '\n值=width');
        }else if (cgl_index==1){
            alert('宽度:'+div_box.innerWidth() + '\n高度：'+ div_box.innerHeight() + '\n值=width+padding');
        }else if (cgl_index==2){
            alert('宽度:'+div_box.outerWidth() + '\n高度：'+ div_box.outerHeight() + '\n值=width+padding+border');
        }else if (cgl_index==3){
            alert('宽度:'+div_box.outerWidth(true) + '\n高度：'+ div_box.outerHeight(true) + '\n值=height+padding+border+margin');
        }else{
            alert('程序出错了');
        };
    });
</script>

在线演示

浅谈JQurey对元素的宽高操作（1）

浅谈JQurey对元素的宽高操作（2）

浅谈JQurey对元素的宽高操作（3）