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

浏览: 121次 日期:2018年01月18日 21:59:44 作者:青格勒

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)

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

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

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

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


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

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

发表评论

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