Notice I am measuring from the outside border of the red
As previously mentioned If I was to change the blue
The image of the browser view shown below clarifies the new measurements returned from offsetLeft and offsetTop when the offsetParent is the blue
Notes
Many of the browsers break the outside border to inside border measurement when the offsetParent is the
and the or element has a visible margin, padding, or border value.With the getBoundingClientRect() strategy we could obtain the updates from an areas external edging edges as the coated in the internet browser viewport relative to the brand new ideal and you will left edge of the fresh new viewport. This means new kept and you can correct line was measured regarding additional edging edge of an element left side of the newest viewport. And better and you will bottom corners was measured about external border edge of a component to the top side of brand new viewport.
In the code below I create a 50px X 50px
The picture lower than suggests the internet browser made look at the above mentioned password with some additional aspect indications to exhibit just how getBoudingClientRect() is calculated.
The top outside border edge of the
5.4 Providing a parts size (border + cushioning + content) from the viewport
The latest getBoundingClientRect() output an item that have a premier, proper, bottom, and you will remaining assets/well worth as well as having a height and thickness possessions/well worth. Brand new peak and you may width attributes suggest the dimensions of new ability where in actuality the overall dimensions are derived by the addition of the content of the div, its cushioning, and you can limitations together.
Equivalent dimensions beliefs can also be found using regarding the newest offsetHeight and you can offsetWidth features. Throughout the code less than I power these attributes to find the same exact peak and you will depth opinions provided by getBoundingClientRect().
5.5 Providing an elements size (padding + content) on viewport excluding borders
The fresh clientWidth and you can clientHeight features get back a complete measurements of an element by the addition of along with her the message of your own ability and its own cushioning excluding the fresh border systems. In the password below I take advantage of these two properties to find the height and you can width off a component also padding however, leaving out boundaries.
5.six Taking topmost consider viewport on a particular point using elementFromPoint()
Using elementFromPoint() it’s possible to get a reference to the topmost element in an html document at a specific point in the document. In the code example below I simply ask what is the topmost element 50 pixels from the top and left of the viewport. Since we have two