Chapter 5. Element Node Geometry and Scrolling Geometry
5.1 Element Node Size, Offsets, and Scrolling Overview
DOM nodes are parsed and painted into visual shapes when viewing HTML documents in a web browser. Nodes, mostly element nodes, have a corresponding visual representation made viewable/visual by browsers. To inspect and in some cases manipulate the visual representation and geometry of nodes programmatically, a set of APIs exist and are specified in the CSSOM View Module. A subset of methods and properties found in this specification provide an API to determine the geometry (i.e., size and position using offset) of element nodes as well as hooks for manipulating scrollable nodes and getting values of scrolled nodes. This chapter breaks down these methods and properties.
Most of the properties (excluding
scrollTop) from the CSSOM View Module
specification are read-only and calculated each time they are accessed.
In other words, the values are live.
5.2 Getting an Element’s offsetTop and offsetLeft Values Relative to the offsetParent
Using the properties
offsetLeft, we can get the offset pixel value of an
element node from the
offsetParent. These element node
properties give us the distance in pixels from an element’s outside top
and left borders to the inside top and left borders of the
offsetParent. The value of the
offsetParent is determined by searching the nearest ancestor elements for an element that has a CSS position value not equal to ...