jQuery获取隐藏元素高度的方法

这篇文章给大家分享的是有关jQuery获取隐藏元素高度的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联专注于彭水苗族土家族企业网站建设,自适应网站建设,商城开发。彭水苗族土家族网站建设公司,为彭水苗族土家族等地区提供建站服务。全流程按需网站设计,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

一个HTML元素可以在jquery的hide()函数的帮助下隐藏,或者可以通过在css中使用visibility:hidden;来轻松隐藏。我们也可以很容易地使用jquery来找到这个隐藏元素的高度。

jQuery获取隐藏元素高度的方法

每个HTML元素都定义了两种高度,即元素的innerheightouterheight

● innerHeight:当不考虑所选元素的边框宽度时,会考虑此高度。

● outerHeight:当考虑所选元素的边框宽度时,将考虑此高度。

下面通过代码示例来看看获取这两种高度的方法。

示例1:获取隐藏元素的innerHeight高度

html代码




	
		
		
	

	
		
hello world!

这里将显示隐藏的“div”元素的高度。

jquery代码

$(document).ready(function() {
   $("#btn1").click(function() {
      var demo = $("div").innerHeight();
      $("#demo").text(demo);
   });
});

输出:

jQuery获取隐藏元素高度的方法

说明:我们使用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获取隐藏元素高度的方法

说明:使用jQuery的outerHeight()函数可以获取的是outerHeight高度,边框宽度将添加到结果中,所以获取的高度为的82。

感谢各位的阅读!关于jQuery获取隐藏元素高度的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前标题:jQuery获取隐藏元素高度的方法
当前链接:http://scyanting.com/article/ppdeje.html