How to use javascript to obtain the height and width of a hidden element (display: none) _ javascript tips

This article describes how to use javascript to obtain the height and width of a hidden element (display: none, if you need a friend, you can refer to js to obtain the size of visible elements. This method can be used directly:

The Code is as follows:

Function getDefaultStyle (obj, attribute) {// return the final style function, compatible with IE and DOM, and set parameters: Element Object and Style Features
Return obj. currentStyle? Obj. currentStyle [attribute]: document. defaultView. getComputedStyle (obj, false) [attribute];
}

However, if this element is hidden (display: none) and the size is unadaptive, the above method won't work! Because the display: none element has no physical size! This is the tragedy!

Fortunately, there is visibility: hidden in css, which is invisible. The biggest difference between it and display: none is that visibility: hidden has physical size. The physical size can be obtained through the above method, but after the display: none is changed to visibility: hidden, the page will be blank, even if you change visibility: hidden to display: none immediately after obtaining the size, the page will still shake. The best way is to remove the hidden element from the screen or exit the Document Stream (position: absolute ). This seems to be perfect, but the tragedy has happened again. If you want to display this element again, this element is invisible and its location is not correct, because this element is visibility: hidden; position: absolute. Therefore, you must restore the style after obtaining the size. The position and visibility attributes are set back to the original style.

This is the basic implementation method for js to obtain the size of hidden elements. If you are interested, please refer to the method in the book "proficient in javascript.

I also made a simple demo here. You can look at the source code:

The Code is as follows:

Js to obtain the size of hidden elements