js隐藏html页面元素高度,如何使用jQuery获取隐藏元素的高度？

2024-06-01 09:57:56

HTML元素可以在jquery hide()函数的帮助下隐藏，或者也可以通过在css中使设置visibility:hidden来轻松隐藏。那么如何使用jquery找到这个隐藏元素的高度？下面本篇文章就来给大家介绍一下使用jQuery获取隐藏元素高度的方法，希望对大家有所帮助。

每个HTML元素定义了两种高度，即元素的innerHeight和outerHeight：

1、innerHeight：当不考虑所选元素的边框宽度时，会考虑此高度。

2、outerHeight：当考虑所选元素的边框宽度时，将考虑此高度。

在jQuery中可以使用innerHeight()和outerHeight()方法来分别获取元素这两种高度。下面就通过示例来看看这两种方法如何使用。

示例1：使用innerHeight()方法计算隐藏元素的innerHeight

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;

}

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

Submit

$(document).ready(function() {

$("#btn1").click(function() {

var demo = $("div").innerHeight();

$("#demo").text(demo);

});

});

效果图：

示例2：使用outerHeight()方法计算隐藏元素的outerHeight

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;

}

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

Submit

$(document).ready(function() {

$("#btn1").click(function() {

var demo = $("div").outerHeight();

$("#demo").text(demo);

});

});

效果图：

js隐藏html页面元素高度,如何使用jQuery获取隐藏元素的高度？相关推荐

jquery获得当前元素父级元素_如何使用jQuery获取父元素
jQuery获取父元素我们有三种方式可以实现,.parent()..parents()..closest(),下面我们将介绍jQuery获取父元素的这三种方式以及一个具体的示例.web前端学习:打造全 ...
bootstrap table 中自定义样式隐藏一列，能够同过jQuery获取隐藏列
做项目的时候准备用bootstrap-table来遍历表格,后续操作需要传主键ID,但又不想ID在表格中显示于是第一次写的代码是下面这段.用的是visible:false,(这个的作用是将列隐藏) ...
html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(v ...
html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
jquery 获取同级元素_如何在jQuery中获取元素的同级
jquery 获取同级元素 In this post, we will discuss how to get the siblings of an HTML element in jQuery. jQ ...
jquery兄弟标签_js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
jQuery获取隐藏文本域
[html] view plaincopyprint? //jquery获取隐藏域 <style type="text/css"> div{ width: ...
jquery 滚动到某个div_如何使用jQuery获取父元素
jQuery获取父元素我们有三种方式可以实现,.parent()..parents()..closest(),下面我们将介绍jQuery获取父元素的这三种方式以及一个具体的示例. web前端学习:打造 ...
jquery 获取当前元素的前一个兄弟节点元素
jquery 获取当前元素的前一个兄弟节点元素,可以使用 prev() 方法示例代码 <!DOCTYPE html> <html><head><meta ...

最新文章

热门文章