jQuery获取隐藏元素高度的方法
这篇文章给大家分享的是有关jQuery获取隐藏元素高度的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联专注于彭水苗族土家族企业网站建设,自适应网站建设,商城开发。彭水苗族土家族网站建设公司,为彭水苗族土家族等地区提供建站服务。全流程按需网站设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务
一个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。
感谢各位的阅读！关于jQuery获取隐藏元素高度的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
当前文章：jQuery获取隐藏元素高度的方法
URL分享：https://www.cdcxhl.com/article24/ppdeje.html
成都网站建设公司_创新互联，为您提供域名注册、建站公司、搜索引擎优化、服务器托管、软件开发、网站改版
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
