首页 > 编程语言 > 详细

纯JavaScript计算隐藏的DIV高度

时间:2021-05-05 21:28:18      阅读:23      评论:0      收藏:0      [点我收藏+]

纯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个像素的高度。

纯JavaScript计算隐藏的DIV高度

原文:https://www.cnblogs.com/ysk5/p/14732202.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!