zoukankan      html  css  js  c++  java
  • jQuery的width()、innerWidth()、outerWidth()方法

    width():

      不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。

    innerWidth():

      包括元素的内边距(padding),但不包括外边距(margin)、边框(border)等部分的宽度。

    outerWidth():

      包括元素的内边距(padding)、边框(border),但不包括外边距(margin)部分的宽度。你也可以指定参数为true,以包括外边距(margin)部分的宽度。

    1 <body>
    2         <div class="box"></div>
    3 </body>
    1 <style>
    2    .box{ width: 100px;height: 100px;background-color: red; }
    3 </style>
     1 <script>
     2         $(function () {
     3             //无边距
     4             console.log("width",$(".box").width());//100px
     5             console.log("innerWid", $(".box").innerWidth());//100px
     6             console.log("outerWid",$(".box").outerWidth());//100px
     7             //加padding 10px;
     8             $(".box").css("padding", "10px");
     9             console.log("width", $(".box").width());//100px
    10             console.log("innerWid", $(".box").innerWidth());//120px
    11             console.log("outerWid", $(".box").outerWidth());//120px
    12             //加border 5px
    13             $(".box").css("border", "5px solid orange");
    14             console.log("width", $(".box").width());//100px
    15             console.log("innerWid", $(".box").innerWidth());//120px
    16             console.log("outerWid", $(".box").outerWidth());//130px
    17             //加margin 10px
    18             $(".box").css("margin", "10px");
    19             console.log("width", $(".box").width());//100px
    20             console.log("innerWid", $(".box").innerWidth());//120px
    21             console.log("outerWid", $(".box").outerWidth());//130px
    22             console.log("outerWid", $(".box").outerWidth(true));//150px
    23         })
    24 </script>
  • 相关阅读:
    反转链表
    Kafka设计解析
    kafka丢失和重复消费数据
    阿里巴巴分布式数据库服务DRDS研发历程
    ZooKeeper系列文章
    阿里中间件RocketMQ
    Spring Cloud构建微服务架构
    TDDL调研笔记
    从OutStreamWriter 和Filewriter谈Java编码
    在Service里调用AlertDialog
  • 原文地址:https://www.cnblogs.com/hyaaon/p/4226241.html
Copyright © 2011-2022 走看看