jQuery获取隐藏元素高度的方法
导读:本文共1732.5字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一个HTML元素可以在jquery的hide()函数的帮助下隐藏,或者可以通过在css中使用visibility:hidden;来轻松隐藏。我们也可以很容易地使用jquery来找到这个隐藏元素的高度。每个HTML元素都定义了两种高度,即元素的innerheight和outerheight: ● innerHeight:当不考虑所选元素的边框宽度时,会考虑此高度。... ...
目录
(为您整理了一些要点),点击可以直达。一个HTML元素可以在jquery的hide()函数的帮助下隐藏,或者可以通过在css中使用visibility:hidden;来轻松隐藏。我们也可以很容易地使用jquery来找到这个隐藏元素的高度。
每个HTML元素都定义了两种高度,即元素的innerheight
和outerheight
:
● innerHeight
:当不考虑所选元素的边框宽度时,会考虑此高度。
● outerHeight
:当考虑所选元素的边框宽度时,将考虑此高度。
下面通过代码示例来看看获取这两种高度的方法。
示例1:获取隐藏元素的innerHeight高度
html代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> body { border: 1px solid red; padding: 10px; width: 300px; } div { width: 310px; height: 80px; font-weight: bold; color: red; font-size: 25px; border: 1px solid red; visibility: hidden;/*隐藏元素*/ } </style> </head> <body> <div>hello world!</div> <p id="demo"> 这里将显示隐藏的“div”元素的高度。 </p> <button id="btn1">获取高度</button> </body> <script type="text/javascript" src="../demo/js/jquery.min.js"></script> <script> //jquery代码 </script></html>
jquery代码
$(document).ready(function() { $("#btn1").click(function() { var demo = $("div").innerHeight(); $("#demo").text(demo); });});
输出:
说明:我们使用height: 80px;
将隐藏div的高度设置为来80;而jQuery的innerHeight()函数可以获取的是innerHeight高度,边框宽度不会添加到结果中,所以获取的高度为的80。
示例2:获取隐藏元素的outerHeight高度
jquery代码
$(document).ready(function() { $("#btn1").click(function() { var demo = $("div").outerHeight(); $("#demo").text(demo); }); });
输出:
说明:使用jQuery的outerHeight()函数可以获取的是outerHeight高度,边框宽度将添加到结果中,所以获取的高度为的82。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
jQuery获取隐藏元素高度的方法的详细内容,希望对您有所帮助,信息来源于网络。