• jquery中innerwidth,outerwidth,outerwidth和width的区别


    在jQuery中,width()方法用于获得元素宽度;

    innerWidth()方法用于获得包括内边界(padding)的元素宽度,

    outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,

    如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

    同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
    所以说:对于同一个元素应该是:width()<=innerWidth()<=outerWidth()<=outerWidth(true);

    再给你一个实例,前提是正确导入jQuery,即可运行。
    代码中将p元素的宽度设计为200px;运行会输出200、220、240、260。

    <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>

  • 相关阅读:
    LPTHW 笨办法学python 20章
    LPTHW 笨方法学python 19章
    LPTHW 笨方法学python 18章
    LPTHW 笨方法学习python 16章
    hadoop删除节点。
    url中的百分号转译
    thrift编译安装
    python学习:函数的学习
    jsp静态导入和动态导入 笔记
    简要描述cookie和session的区别:
  • 原文地址:https://www.cnblogs.com/BluceLee/p/10531336.html
Copyright © 2020-2023  润新知