Width and height of the browser

  • window.innerHeightFor the browser viewport (vh), containing the horizontal scroll bar at the bottom
  • window.innerWidthFor the browser viewport (vw), including the vertical scroll bar on the right
  • window.outHeightFor the entire height of the browser, including the menu bar, address bar, title bar, etc
  • window.outerWidthFor the entire width of the browser, including sidebars, window borders, and resized window borders

Gets the width, height and position of the element

ClientWidth and clientHeight

  • Inline layoutThe box has 0 elements
<span id="inline">inline span</span>
document.getElementById("inline").clientWidth // output: 0
Copy the code
  • Element. clientWidth = Inner width + left/right paddingVertical scroll bars, borders, and margins are not included
  • Element.clientHeight = Inner height + upper and lower paddingRepresents the height inside the element, including the inner margin, but excluding horizontal scroll bars, borders, and margins
#b1{ padding: 10px; width: 100px; height: 100px; border: 5px solid red; background: black; box-sizing: border-box; } <div id="b1">block</div> const elem = document.getElementById("b1"); Console. log(elem.clientheight) // output 90 (Need to subtract border height) // Output 90 (need to subtract border height)Copy the code
  • HTMLElement.clientLeftEquivalent to the width of border-left
  • HTMLElement.clientTopIt is the width of border-top

OffsetWidth and offsetHeight

  • Unlike clientWidth and clientHeight, offsetWidth and offsetHeight also get the width and height of the inline layout
<span id="inline">inline</span>
console.log(document.getElementById("inline").offsetWidth) //output 42
Copy the code
  • HTMLElement.offsetWidthReturns the layout width of an element, including border, padding, and the width of the vertical scroll bar on the right
  • HTMLElement.offsetHeightReturns the layout height of an element, including the height of the border, padding, and bottom horizontal scroll bar

OffsetTop, offsetLeft, offsetParent

  • HTMLElement.offsetParentIs a read-only property that returns a pointer to the nearest (at the contain level) location element that contains the element or to the nearest table, TD,th, or body element. When element style.display is set to “None”, offsetParent returns NULL. OffsetParent is useful because offsetTop and offsetLeft are both relative to their inner margin boundaries
  • HTMLElement.offsetLeftReturns the pixel value of the upper-left corner of the current element offset from the left edge of the htmlElement. offsetParent node.
  • HTMLElement.offsetTopReturns the distance of the current element relative to the top inner margin of its htmlElement. offsetParent element.

getBoundingClientRect

Element. GetBoundingClientRect () method returns the Element size and its position relative to the viewport.

/ / left, top, right, bottom, width, height, x, y DOMRect var the rect object = element. GetBoundingClientRect ();Copy the code

It is important to note that their values are relative to the viewport, not absolute. When the scrolling position changes, the values of the top and left attributes change immediately.

#t1{ margin-top: 100vh; margin-left: 100vw; width: 100px; background: red; } // When the scrollbar position changes, the calculated top and left also change. console.log(document.getElementById("t1").getBoundingClientRect())Copy the code

Window.getComputedStyle()

The only difference is that getComputedStyle is read-only.

Related properties in the event

  • clientX,clientYReturns the contact relative toThe visible areaThe X and theta on the left-hand side have coordinates.Does not include any roll offset. This value changes depending on the user’s scaling behavior in the viewable area.
  • pageX,pageYReturns the contact relative toAn HTML documentThe X and y coordinates of the left-hand side. Unlike the clientX and clientY attributes, this value is relative to the coordinates of the entire HTML document and is independent of the user scroll position. So when there is a horizontal roll offset,This value contains the offset of the browser’s horizontal scrolling.
  • screenX|screenYReturns the X and y coordinates of the contact relative to the left edge of the screen. Does not contain an offset for page scrolling.
  • offsetX|offsetYEvent objects andThe target nodeThe offset of the padding edge in the x-y direction of the.
  • X is short for clientX and y is short for clientY.

Image from Internetwww.cnblogs.com/1906859953L…