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

昨天写了《JQurey对元素的宽高操作-获取》相关的文章，今天就说一下关于赋值的问题。

使用JQ的获取元素宽高的属性来给元素赋值有很多的好处，咱们可以纯粹的给width或者height，或者让JQ自动过滤margin、padding、border等等，这样咱们就可以用在某些场景下，使用合适的方法了。

给元素赋值其实很简单只要在 width() 的括号里面添加响应的数字就可以了，比如说width(400)这样就可以。

下面简单的讲解一下：

一、赋值宽度

1、.width(400); 值：width

这个方法直接就给相应的盒子width值，比如说400，不会减去任何的东西

2、.innerWidth(400); 值：400-padding

这里JQ把padding减去，然后把数字改成宽度

3、.outerWidth(400); 值：400-padding-border

减去padding和border

4、.outerWidth(400,true); 值：400-padding-border-margin

减去padding、border、margin，记得数字在true前面。

二、赋值高度：

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

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

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

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

这个是我预先设置的盒子模型：

案例请打开F12会更加的清晰。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="box2">
    <p>height:100px;</p>
    <p>width:400px;</p>
    <p>margin:50px;</p>
    <p>padding:20px;</p>
    <p>border:1px solid #b45a3c;</p>
    <p>background:#333;</p>
    <p>color:#fff;</p>
</div>
<div id="box2_btn">
    <a>width(400)<br/>height(400)</a>
    <a>innerWidth(400)<br/>innerHeight(400)</a>
    <a>outerWidth(400)<br/>outerHeight(400)</a>
    <a>outerWidth(400,true)<br/>outerHeight(400,true)</a>
</div>
<style type="text/css">
    #box2{ height:200px; width:400px; margin:10px; padding:10px; border:10px solid #b45a3c; background:#333; color:#fff; line-height:26px; font-size:12px;}
    p{ margin:0;}
    #box2_btn a{ display:inline-block; border:1px solid #b45a3c; color:#333; margin:0 10px; padding:0 10px;}
</style>
<script type="text/javascript">
    var div_box2 = $('#box2');
    var box2_btn = $('#box2_btn a');
    box2_btn.click(function () {
        var cgl_indexs = $(this).index()
        if (cgl_indexs==0){
            div_box2.width(400);
            div_box2.height(400)
            alert(
                '宽度：'+div_box2.width()+'\n'+
                '高度：'+div_box2.height()+
                '\n不考虑margin、padding、border直接给高度400和宽度400'
            );
        }else if (cgl_indexs==1){
            div_box2.innerWidth(400);
            div_box2.innerHeight(400);
            alert(
                '宽度：'+div_box2.width()+'\n'+
                '高度：'+div_box2.height()+
                '\n值=400-padding');
        }else if (cgl_indexs==2){
            div_box2.outerWidth(400);
            div_box2.outerHeight(400)
            alert(
                '宽度：'+div_box2.width()+'\n'+
                '高度：'+div_box2.height()+
                '\n值=400-padding-border'
            );
        }else if (cgl_indexs==3){
            div_box2.outerWidth(400,true);
            div_box2.outerHeight(400,true);
            alert(
                '宽度：'+div_box2.width()+'\n'+
                '高度：'+div_box2.height()+
                '\n值=400-padding-margin-border');
        }else{
            alert('程序出错了');
        }
    });
</script>

在线演示

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

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

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