jQuery-尺寸、位置操作

阿新 • • 發佈：2022-04-18

jQuery尺寸

語法	用法
width() / height()	取得匹配元素寬度和高度值，只算width/height
innerWidth() / innerHeight()	取得匹配元素寬度和高度值，包含 padding
outerWidth() / outerHeight()	取得匹配元素寬度和高度值，包含padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素寬度和高度值，包含padding、border、margin

　　以上引數為空，則是獲取相應值，返回的數字型。

　　如果引數為數字，則是修改相應值。

  < 
style>
    div {
      width: 200px;
      height: 200px;
      background-color: cyan;
      padding: 10px;
      border: 15px solid black;
      margin: 20px;
    }
  </style>
</head>

<body>
  <div></div>
</body>
<script src="./jquery.min.js"></script>
<script 
>
  console.log($('div').width());
  console.log($('div').innerWidth());
  console.log($('div').outerWidth());
  console.log($('div').outerWidth(true));
</script>

jQuery 位置

　　主要有三個：offset()、position()、scrollTop() / scrollLeft()。

　　offset：設定或獲取元素偏移。

　　　　1、設定或返回被選元素相對於文件的偏移座標，跟父級沒有關係。

　　　　2、該方法有兩個屬性，left 和 top。offset().top 用於獲取距離文件頂部的距離，offset().left 用於獲取距離文件左側的距離。

　　　　3、可以設定元素的偏移：offset({top:10, left:20})

　　position：獲取元素偏移。

　　　　1、position() 方法用於返回被選元素相對於帶有定位的父級偏移座標，如果父級都沒有定位，則以文件為準。

　　　　2、這個方法只能獲取不能設定。

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 400px;
      height: 400px;
      background: cyan;
      margin: 100px;
      overflow: hidden;
      position: relative;
    }

    .son {
      width: 150px;
      height: 150px;
      background: purple;
      position: absolute;
      top: 10px;
      left: 10px;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
<script src="./jquery.min.js"></script>
<script>
  // 返回的是一個物件
  console.log($('.son').offset());
  console.log($('.son').offset().left);
  // $('.son').offset({
  //   top: 55,
  //   left: 333
  // })
  // 距離有定位的父級的距離，如果沒有以body為準
  console.log($('.son').position());
</script>

　　scrollTop() / scrollLeft()：設定或獲取元素被捲去的頭部和左側。

　　　　1、scrollTop() 方法設定或返回被選元素被捲去的頭部。

  <style>
    body {
      height: 2000px;
    }

    .back {
      position: fixed;
      width: 50px;
      height: 50px;
      background-color: cyan;
      right: 30px;
      bottom: 100px;
      display: none;
    }

    .container {
      width: 900px;
      height: 500px;
      background-color: skyblue;
      margin: 400px auto;
    }
  </style>
</head>

<body>
  <div class="back">返回頂部</div>
  <div class="container">
  </div>
</body>
<script src="./jquery.min.js"></script>
<script>
  $(window).scroll(function () {
    if ($(document).scrollTop() >= $('.container').offset().top) {
      $('.back').fadeIn()
    } else {
      $('.back').fadeOut()
    }
  })
</script>