纯JavaScript计算隐藏的DIV高度

纯JavaScript计算隐藏的DIV高度，这对有特效需要的项目来说也比较重要。下面直接上代码，方便大家进行交流。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>纯JavaScript计算隐藏的DIV高度</title>
 6 <style type="text/css">
 7 #showid { width:600px; margin:auto; display:block; }
 8 #demo {
 9  display:block;margin:20px auto; height:260px; width:600px; background:#f2f2f2; 
10  border:1px solid #ddd; font-size:30px; line-height:260px; text-align:center;
11  font-family:"仿宋"; font-weight:bold;text-shadow:5px 5px 5px #ddd;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="showid"></div>
17 <div id="demo" style="display:none">隐藏的DIV高度如何计算</div>
18 <script type="text/javascript">
19  var a = document.querySelector("#demo");
20  var b = document.querySelector("#showid");
21  
22  a.style.removeProperty("display");
23  a.style = "visibility:hidden;position:absolute;left:-5000px; top:-50000px;";
24  var h = a.offsetHeight;
25  a.style = "height:0px;overflow:hidden;display:none;";
26  
27  b.innerHTML = "隐藏DIV的高度为：" + h + "px";
28 </script>
29 </body>
30 </html>

最终显示262个显示，我们上面设定的是260像素，边框设定1个像素，所以总计高度为262个像素的高度。

posted on 2021-05-05 17:34 元森美阅读(168) 评论(0) 收藏举报