jQuery怎么获取隐藏元素的高度?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
jQuery怎么获取隐藏元素的高度?
方法1:使用innerHeight()方法计算隐藏元素的innerHeight高度
innerHeight:当不考虑所选元素的边框宽度时,会考虑此高度。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 310px; height: 80px; font-weight: bold; color: green; font-size: 25px; border: 1px solid green; visibility: hidden; } body { border: 1px solid green; padding: 10px; width: 300px; } </style> </head> <body> <div></div> <p id="demo">这里将显示隐藏的“div”元素的高度。</p> <button id="btn1">Submit</button> <strong style="color:transparent">来源gao@daima#com搞(%代@#码网</strong> </body> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function() { var demo = $("div").innerHeight(); $("#demo").text(demo); }); }); </script> </html>
方法2:使用outerHeight()方法计算隐藏元素的outerHeight高度
outerHeight:当考虑所选元素的边框宽度时,将考虑此高度。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 310px; height: 80px; font-weight: bold; color: green; font-size: 25px; border: 1px solid red; visibility: hidden; } body { border: 1px solid red; padding: 10px; width: 300px; } </style> </head> <body> <div></div> <p id="demo">这里将显示隐藏的“div”元素的高度。</p> <button id="btn1">Submit</button> </body> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function() { var demo = $("div").outerHeight(); $("#demo").text(demo); }); }); </script> </html>
更多web前端开发知识,请查阅 搞代码网 !!
以上就是jQuery怎么获取隐藏元素的高度?的详细内容,更多请关注gaodaima搞代码网其它相关文章!