Js obtains the width and height of hidden elements, and js obtains hidden elements.

Js obtains the width and height of hidden elements, and js obtains hidden elements.

There are some js methods on the Internet to obtain the width of hidden elements, but some situations may fail to be obtained.

For example:

<! DOCTYPE html> 

Test is obtained, but test2_child is not obtained. In view of this situation, I wrote a solution myself.
Solution:
1. obtain all the hidden ancestor elements of the element (take the width and height) until the body element includes itself.
2. Obtain the display and visibility attributes of the styles of all hidden elements and save them.
3. Set all hidden elements to visibility: hidden; display: block! Important; (important is required to avoid insufficient priority ).
4. Obtain the width and height of the element (take the width and height.
5. Restore the display and visibility attributes of all hidden elements.
6. Return the high value of element width.
Code implementation:

Function getSize (id) {var width, height, elem = document. getElementById (id), noneNodes = [], nodeStyle = []; getNoneNode (elem); // gets setNodeStyle (); width = elem, an element of multi-layer display: none. clientWidth; height = elem. clientHeight; resumeNodeStyle (); return {width: width, height: height} function getNoneNode (node) {var display = getStyles (node ). getPropertyValue ('display'), tagName = node. nodeName. toLowerC Ase (); if (display! = 'None' & tagName! = 'Body') {getNoneNode (node. parentNode);} else {noneNodes. push (node); if (tagName! = 'Body') getNoneNode (node. parentNode) ;}}// this method can be used to determine whether the display attribute settings are available. style. display is not supported. Function getStyles (elem) {// Support: IE <= 11 +, Firefox <= 30 + (#15098, #14150) // IE throws on elements created in popups // FF meanwhile throws on frame elements through "defaultView. getComputedStyle "var view = elem. ownerDocument. defaultView; if (! View |! View. opener) {view = window;} return view. getComputedStyle (elem) ;}; function setNodeStyle () {var I = 0; for (; I <noneNodes. length; I ++) {var visibility = noneNodes [I]. style. visibility, display = noneNodes [I]. style. display, style = noneNodes [I]. getAttribute ("style"); // overwrite other display styles noneNodes [I]. setAttribute ("style", "visibility: hidden; display: block! Important; "+ style); nodeStyle [I] = {visibility: visibility, display: display }}function resumeNodeStyle () {var I = 0; for (; I <noneNodes. length; I ++) {noneNodes [I]. style. visibility = nodeStyle [I]. visibility; noneNodes [I]. style. display = nodeStyle [I]. display ;}}}
Example:
Var testSize = getSize ('test'); console. log ("test-> width:" + testSize. width + "height:" + testSize. height); var test2ChildSize2 = getSize ('test2 _ child '); console. log ("test2Child2-> width:" + test2ChildSize2. width + "height:" + test2ChildSize2. height); var test3ChildSize = getSize ('test3 _ child '); console. log ("test3_child-> width:" + test3ChildSize. width + "height:" + test3ChildSize. height); // print the following values: test-> width: 417 height: 18test2Child2-> width: 417 height: 18test3_child-> width: 417 height: 18
Note:
1. Open and show all hidden ancestor elements, and then obtain the wide and high values of the elements. In some cases, the obtained values may be incorrect.
PS: But don't worry, just use the hack method when an error occurs.
2. The reason for saving and hiding the display and visibility attributes of the ancestor element is that they can be set back later without affecting themselves.
3. In addition, the getStyles method is extracted from the jquery source code to obtain whether the display attribute settings are finally available.
PS: cannot be obtained from style. display.
The above js implementation method for obtaining the width and height of hidden elements is all the content shared by the editor. I hope to give you a reference, and I hope you can also provide more support for helping customers.