JavaScript gets the height of the div and implements height monitoring

Posted May 26, 20203 min read

<! DOCTYPE html>


demo




hello



As can be seen
offsetHeight = height + padding * 2 + border * 2
clientHeight = height + padding * 2
It can be seen that offsetHeight includes the content of the element + padding + border, and the value of clientHeight is equal to the content of the element + inner border.
So how do we get the height of the element itself?
1. Use style directly?
But console.log(div.style.height) //''
The printout is empty, because the style attribute can only be obtained by the value in the style attribute of the element tag.
The div here has nothing, no style, and of course the output is empty.
#demo {
    width:100px;
   /* height:200px; * /
    background:yellow;
    margin:10px;
    padding:10px;
    border:2px solid blue;
}
<div id = "demo" style = "height:200px"> hello </div>
If you comment out the height in the internal style sheet and add the height to the style,
console.log(div.style.height) //200px
In this way, you can get the height perfectly.

Obviously this is not ideal to add to the inline style every time, is there a better way?
2.getComputedStyle
The getComputedStyle() method obtains all the CSS property objects that are finally applied to the element(even if there is no CSS code, it will also treat the eighth generation ancestors)
To show)
This eliminates the need to add inline styles.
In addition, getConputedStyle is read-only, but style is readable and writable, and with them, you can dynamically set the element height.
Only one line of code
window.getComputedStyle(div);
You can get a lot of attribute values.
But what if you only want a certain attribute value? Let getPropertyValue(you can get the property value of the CSS style declaration object) to help.
console.log(window.getComputedStyle(). getProperttValue('height')); //200px
Successfully get the element height.

How to get the change of element attribute value
ResizeObserver allows us to observe the change in the size(width, height) of the DOM element's content rectangle and respond accordingly. It is like adding a document.onresize() or window.resize() event to an element(but in JavaScript, only window has a resize event). It is useful when the element changes size without resizing the window. The following describes some adjustments to observer behavior:

When the observed element is inserted or deleted from the DOM, the observation will trigger
When the display value of the observed element is none, the observation will trigger
Observation will not trigger on non-replaced inline elements
Observation will not be triggered by CSS transform
If the element is displayed, and the element size is not 0,0, the observation will trigger

To use Resize Observe, you only need to instantiate a new ResizeObserve object and pass in a callback function, the function receives the observed entry
const myObserver = new ResizeObserver(entries => {

//traverse the entries and do something

});
Then we call observe on the instantiated object and pass in an element to observe
const someEl = document.querySelector('. some-element');
const someOtherEl = document.querySelector('. some-other-element');

myObserver.observe(someEl);
myObserver.observe(someOtherEl);
For each entry, we will get an object containing contentRect and a target attribute.
target is the DOM element itself, contentRect is an object with the following properties:width, height,
x, y, top, right, bottom and left.
The contentRectde width and height values do not include padding. contentRect.top is the padding at the top of the element
contentRect.left is the padding on the left side of the element
For example, to print the values of width and height when the size of the monitored element changes, you can do the following:
const myObserver = new ResizeObserver(entries => {

entries.forEach(entry => {
  console.log('width', entry.contentRect.width);
  console.log('height', entry.contentRect.height);
});

});

const someEl = document.querySelector('. some-element');
myObserver.observe(someEl);