Size and offset properties of DOM elements

1. Client series

  • clientWidth: The width of the visible area of ​​the box .
    When the box model is content-box, clientWidth = width + padding - vertical scroll bar width
    When the box model is border-box, clientWidth = width - border - vertical scroll bar width
  • clientHeight: The height of the visible area of ​​the box .
    When the box model is content-box, clientHeight= height + padding - the height of the horizontal scrollbar
    When the box model is border-box, clientHeight= height - border - the height of the horizontal scrollbar
  • clientTop: The height of the top border of the box .
  • clientLeft: The width of the left border of the box .

Two, offset series

  • offsetWidth: The width of the box layout .
    When the box model is content-box, offsetWidth = width + padding + border
    When the box model is border-box, offsetWidth = width
  • offsetHeight: The height of the box layout .
    When the box model is content-box, offsetHeight = height+ padding + border
    When the box model is border-box, offsetHeight = height
  • offsetParent: The nearest positioning (relative, absolute, fixed, sticky) parent element of the box
  • offsetLeft: the distance from the outside of the left border of the box to the inside of the offsetParent left border
  • offsetTop: the distance from the outside of the box's top border to the inside of the offsetParent top border

Three, scroll series

  • scrollWidth: Returns the overall width of the element, including the invisible part that cannot be displayed on the web page due to overflow, excluding margins and borders .
  • scrollHeight: Returns the overall height of the element, including invisible parts that cannot be displayed on the web page due to overflow, excluding margins and borders.
  • scrollLeft: The scrolling distance to the right of the horizontal scroll bar, which is also the distance from the outside of the position occupied by the padding to the inside of the border. When the scroll bar slides to the far right, scrollLeft = scrollWidth - clientWidth; when there is no scrolling, scrollLeft is 0.
  • scrollTop: The downward scrolling distance of the horizontal scroll bar.

Guess you like

Origin blog.csdn.net/dark_cy/article/details/122012271