浅谈JQurey对元素的宽高操作(2)

浏览: 394次 日期:2018年01月19日 21:27:33 作者:青格勒

昨天写了《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)

文章链接:http://cenggel.com/js/52.html

版权声明:文章《浅谈JQurey对元素的宽高操作(2)》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注