“You want to avoid DOM manipulation as much as possible.” HMM! This phrase is often seen in the framework’s documentation, and seems to give us front-end nerds a hint that you’re holding back the DOM and it’s not working. Fragile as my little front end also fart fart subconscious skip DOM, that thing is not working, learn useless! But the truth is, products often tell us that we want all kinds of fancy interactions. Once we analyze it, it’s always dom manipulation, and then we hate it one time or another and say that it’s not good to do, but if we do it more times, we won’t feel bad, right? Look back at that sentence seems to be mocking me, I didn’t say you can’t DOM operation……

Then let’s face it! After careful analysis, it is quite easy to obtain the DOM. In my current business experience, most of the logic of this kind of requirement is in the position of elements and the operation of size; But there are all sorts of weird apis that happen to do that, so the theme of this article is to sort out the various location-size apis in the DOM;

getComputeStyle

  • Gets a style object (CSSStyleDeclaration) from the DOM.
  • Const computeStyle = window.getcomputestyle (domEle);
  • computedStyle.height = boxSIzing === borderBox ? Css.style. height: contentHeight (without scroll bars)
  • A. getComputedStyle (read only) The style read is the final style, including inline, embedded, and external styles. The ele. Style (read) inline style can also be changed. The style returns the set value, not the final value;

getBoundingClientRect

  • Element. c returns a DomRect {width, height, top, bottom, left, right, x, y}
  • Width: The width of the box model (including the border)
  • Ie8 has a top,left, and 2px error problem (the coordinates of HTML elements in ie7 and below will start from (2, 2)). Ie8 has fixed this bug).
  • clientWidth clientHeight clientTop clientLeft
  • Client is a client.
  • ClietnHeight = contentHeight + padding + (Scroll bars exist? – Scroll bar width: 0)
  • ClientWidth = same as above;
  • ClientLeft = borderleft. width + ((text lines from right to left with scroll bar)? Scroll bar width: 0);
  • ClentTop = borderTop. Width;
  • Tip: Sets display: None to zero and returns integer values. These properties are read-only;

offsetTop offsetLeft offsetHeight offsetWidth

  • Offset: the meaning of compensation;
  • It is sometimes referred to as the physical/graphic size of an element, or the height of an element’s border-box.
  • offsetHeight =height + padding + border; (Tip: This is height, not contentHeight; Does not include ::after,::before, simply the height from the border, this property is useful);
  • OffsetWidht = ditto;
  • OffsetTop = The offset of the element from the top of the offsetParent (almost the same as the positioning element relative to the positioning element);
  • The offsetLeft = ditto
  • Tip: Sets display: None to zero and returns integer values. These properties are read-only;

scrollTop scrollLeft scrollHeight scrollWidth

  • ScrollHeight: Equal to the minimum height that the element needs to fit into the content in the viewport without using the scroll bar. Without the vertical scroll bar, the scrollHeight is the same as the clientHeight minimum that the element view needs to fill everything. The padding of the element is included, but the border and margin are not. ScrollHeight also includes pseudo-elements like ::before and ::after. If the inner element is positioned as a changed element, the child element positioned in position: absolute also calculates the offsetHeight according to the required height of the viewport content.
  • ScrollWidth: same as above
  • ScrollTop: Property to get or set the number of pixels that an element’s content scrolls vertically.
  • ScrollLeft: same as above
  • ScrollTop can be set to any integer value, and note that if an element cannot be rolled (for example, it does not overflow, or the element has a “non-scrollable” attribute), scrollTop will be set to 0. If you set scrollTop to a value less than 0, scrollTop is set to 0. If you set scrollTop to a value beyond the container, scrollTop is set to the maximum value.
  • Tip: Add an element.scrollto ();