jQuery尺寸、位置操作

最新推荐文章于 2022-11-10 20:29:49 发布

coder-lxy

最新推荐文章于 2022-11-10 20:29:49 发布

阅读量193

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_46178261/article/details/105711326

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 jQuery 尺寸

在这里插入图片描述

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 10px;
      border: 15px solid red;
      margin: 20px;
    }
  </style>
<body>
  <div></div>
  <script>
    $(function () {
      // 1. width() / height() 获取设置元素width和height大小 
      console.log($("div").width());// 200 返回的数值不含单位
      $("div").width("300px");//可以不加单位直接写数字

      // 2. innerWidth() / innerHeight() 获取设置元素width和height + padding大小 
      console.log($("div").innerWidth());// 320


      // 3. outerWidth() / outerHeight 获取设置元素width和height + padding + border大小 
      console.log($("div").outerWidth());// 350
      //$("div").width("300px");
      
      // 4. outerWidth(true) / outerHeight(true) 获取设置元素width和height + padding + border + margin大小 
      console.log($("div").outerWidth(true));// 390
     // $("div").width("300px");
    }) 
  </script>
  
</body>
</html>