js to obtain hidden elements width and height implementation method

Author：Eve Cole Update Time：2025-07-16 05:00:02

There are some methods for js to obtain hidden elements' width and height on the Internet, but there may be some situations that cannot be obtained.

For example:

 <!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title></head><body><div id="test" style="display:none"> I have a pot of wine that is enough to comfort the dust. All the rivers and seas are poured into the rivers and seas, and they are given to the people of the world. </div><div id="test2" style="display:none"> <div style="display:none"> <div id="test2_child"> I have a pot of wine that is enough to comfort the dust. All the rivers and seas are poured into the rivers and seas, and they are given to the people of the world. </div> </div></div><div id="test3"> <div> <div id="test3_child"> I have a pot of wine that is enough to comfort the dust. All the rivers and seas are poured into the rivers and seas, and they are given to the people of the world. </div> </div></div></div></body></html>

test can be obtained, but test2_child cannot be obtained. In view of this situation, I wrote a method to solve it myself.

Solution:

1. Get the element (take the width and height) all hidden ancestor elements until the body element, including yourself.

2. Get the display and visibility properties of all hidden elements and save them.

3. Set all hidden elements to visibility:hidden;display:block !important; (The reason for important is to avoid insufficient priority).

4. Get the width and height of the element (take the width and height).

5. Restore the display and visibility properties of the style of all hidden elements.

6. Returns the element width and height value.

Code implementation:

 function getSize(id){ var width, height, elem = document.getElementById(id), noneNodes = [], nodeStyle = []; getNoneNode(elem); //Get the element of multi-layer display: none; setNodeStyle(); width = elem.clientWidth; height = elem.clientHeight; resumeNodeStyle(); return { width : width, height : height } function getNoneNode(node){ var display = getStyles(node).getPropertyValue('display'), tagName = node.nodeName.toLowerCase(); if(display != 'none' && tagName != 'body'){ getNoneNode(node.parentNode); } else { noneNodes.push(node); if(tagName != 'body') getNoneNode(node.parentNode); } } //This method can get whether there is the final display property setting, and cannot be style.display. 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 demonstration:

 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); //The print value is as follows test-> width:417 height:18test2Child2-> width:417 height:18test3_child-> width:417 height:18

Notes:

1. Open Show all hidden ancestor elements and get the width and height values of the element. In some cases, it may be incorrect to get the value.

PS: But don’t worry about this, just hack the method when something really goes wrong.

2. The reason why the hidden ancestral element display and visibility attributes is to be set back later without affecting itself.

3. In addition, the getStyles method is extracted from the jquery source code, so that this method can obtain whether there is the final display attribute setting.

PS: Cannot be obtained from style.display.

The above method to obtain hidden elements in js is all the content shared by the editor. I hope it can give you a reference and I hope you can support Wulin.com more.