jQuery size, position operation

1 jQuery size

Insert picture description here

  • If the above parameter is empty, the corresponding value is obtained, and the returned value is numeric
  • If the parameter is a number, modify the corresponding value
  • The parameter does not need to write the unit
  <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>

2 jQuery location

There are three main positions: offset(), position(), scrollTop()/scrollLeft()

1. offset() set or get the offset of the element

  • The offset() method sets or returns the offset coordinates of the selected element relative to the document, which has nothing to do with the parent.
  • This method has two attributes left and top. offset().top is used to get the distance from the top of the document, offset().left is used to get the distance from the left side of the document.
  • You can set the offset of the element: offset({top:10,left:30});

2. position() Get the offset of the element

  • The position() method is used to return the offset coordinates of the selected element relative to the parent with positioning. If the parent is not positioned, the document shall prevail.
  • This method can only get and cannot set the offset

3. scrollTop()/scrollLeft() set or get the head and left side of the element being scrolled

  • The scrollTop() method sets or gets the scrolled head of the selected element
  • The scrollLeft() method sets or gets the left side of the selected element being scrolled

Guess you like

Origin blog.csdn.net/qq_46178261/article/details/105711326