zoukankan      html  css  js  c++  java
  • jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    var a = 元素本身的宽度;

    width() = a;

    innerWidth() = a+padding;

    outerWidth() = a+padding+border;

    outerWidth(true) = a+padding+border+margin;

    在jQuery中,
    width()方法用于获得元素宽度;
    innerWidth()方法用于获得包括内边界(padding)的元素宽度,
    outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,
    如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
    同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。

    所以说:对于同一个元素应该是:
    width()<=innerWidth()<=outerWidth()<=outerWidth(true);


    举个例子:
    <script type="text/javascript">
    $(document).ready(function(){
    $(".btn1").click(function(){
    var obj=$("#p_obj");
    alert(obj.width());
    alert(obj.innerWidth());
    alert(obj.outerWidth());
    alert(obj.outerWidth(true));
    });
    });
    </script>
    <p id="p_obj" style=" 200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
    <button class="btn1">输出高度</button>

    输出的结果分别是 200px, 220px, 240px, 260px.



  • 相关阅读:
    uwsgi
    protobuf c++ API
    memcached 第二篇----安装使用
    ice grid配置使用第二篇------实际使用
    ICE BOX 配置,使用----第一篇
    可视化资料收集
    Protocol Buffers
    ice grid 完整部署过程
    django组件之ajax
    关于Django在写小项目的一些小注意事项
  • 原文地址:https://www.cnblogs.com/calin/p/4881627.html
Copyright © 2011-2022 走看看