纯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个像素的高度。
原文:https://www.cnblogs.com/ysk5/p/14732202.html