JQuery的height函数(操作元素高度)

最新推荐文章于 2024-02-24 19:11:33 发布
原创 最新推荐文章于 2024-02-24 19:11:33 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了jQuery中的height()函数的三种主要操作方式：设置高度、获取高度及动态调整高度，并通过实例代码进行演示。
height()函数三种重要操作
$(selector).height(length)
$(selector).height()
$(selector).height(function(index,oldheight){return oldheight})


1.height(length)函数：设置匹配元素的高度。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>height函数的使用</title>
                
        <!--引入jquery库-->
        <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
        
        <script type="text/javascript">
        $(document).ready(function(){
        $("#p1").css("background-color","red");
        //设置id为p1标签的高度为100px，如果是$("#p1").height(100);默认是100px,如果指定单位要加上引号
        $("#p1").height("100px");
        });
        </script>
    </head>
    <body>
   
    <p id="p1" >height函数的使用</p>
   
    </body>
</html>



 


2.height(l)函数：返回匹配元素的高度。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>height函数的使用</title>
                
        <!--引入jquery库-->
        <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
        
        <script type="text/javascript">
        $(document).ready(function(){
        //获得标签的高度
        alert("id为p1的标签-->  height："+$("#p1").height());
        });
        </script>
    </head>
    <body>
   
    <p id="p1" style="background-color:red;height:100px">height函数的使用</p>
   
    </body>
</html>



 


3.height(function(index,oldheight){return oldheight})函数：使用函数来设置所有匹配元素的高度。
index - 可选。接受选择器的 index 位置
oldvalue - 可选。接受选择器的当前值。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>height函数的使用</title>
                
        <!--引入jquery库-->
        <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
        
        <script type="text/javascript">
        $(document).ready(function(){
        $("button").click(function(){
        $("#p1").css("background-color","red");
        //使用函数来设置高度
        $("#p1").height(function(n,c){
        return c+10;
        });
        }); 
        });
        </script>
    </head>
    <body>
   
    <p id="p1" >height函数的使用</p>
    <button>以 10 像素的幅度增加 p 元素的高度</button>
   
    </body>
</html>



 















使用jquery中height()方法获取各种高度大全
01-21
代码如下:alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 alert($(document).width());/
jQuery height()、innerHeight()、outerHeight()函数的区别详解
01-19
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。 与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。 在这里，我们以...
jQuery height() 方法
m0_57835615的博客
06-11 1064
jQuery height( ) 方法可用于设置或返回被选元素的高度。当该方法用于返回高度时， 则返回第一个匹配元素的高度。 当该方法用于设置高度时，则设置所有匹配元素的高度。
jQuery中的height()、innerheight()、outerheight()的区别总结
weixin_30782331的博客
01-07 155
在前端jQuery代码中突然看到outerheight(),第一感觉就是，这是什么鬼？然后仔细查阅了一下，居然发现还有这么多相似的东西。 在jQuery中，获取元素高度的函数有3个，它们分别是height()、innerHeight()、outerHeight()。 与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、innerWidth()、outerWidth()。 ...
jquery的height()和javascript的height总结，js获取屏幕高度
weixin_30868855的博客
11-07 148
jquery的height()和javascript的height总结，js获取屏幕高度在javascript和jquery中，都有对各种高度的写法，在这里，我们就着重讲一下窗口、文档等高度的理解。(宽度和高度差不多！)jquery的各种高度首先来说一说$(document)和$(window)，如下：$(document).height();//整个网页的高度$(window).height()...
jquery height() innerHeight () outerHeight( )
JiM-W 的博客
01-16 619
height innerHeight outerHeight
jQuery设置指定网页元素宽度和高度的方法
10-24
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括设置和获取网页元素的宽度和高度。本篇文章将详细讲解如何利用jQuery的`width()`和`height()`方法来改变指定网页元素的尺寸。 首先...
jquery 设置height页面自动适应高度布局效果代码
11-24
"jQuery 设置 height 页面自动适应高度布局效果代码"这个主题，就是关于如何使用 jQuery 这个强大的 JavaScript 库来动态调整元素高度，使其根据浏览器窗口大小变化或不同设备屏幕尺寸自动适配。下面我们将深入探讨...
jquery自定义函数的多种方法
12-02
在jQuery中，自定义函数是开发过程中非常常见且实用的功能，可以提高代码的复用性和模块化程度。这里我们探讨几种不同的方法来实现jQuery自定义函数。 首先，我们可以直接在jQuery对象上定义方法。比如： ```...
jq获取页面高度_使用jquery中height()方法获取各种高度
weixin_39637711的博客
12-22 1614
$(window).height(); //浏览器当前窗口可视区域高度$(document).height(); //浏览器当前窗口文档的高度$(document.body).height();//浏览器当前窗口文档body的高度$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin$(windo...
JQ height()、innerHeight()、outerHeight()函数的区别
一直专注于互联网
02-28 411
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。   下...
jq 关于height
好学
11-18 192
height:高度 innerHeight:高度＋补白 outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距 html代码： &lt;div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id...
无涯教程-jQuery - Height方法函数
最新发布
无涯教程
02-24 1170
Height()方法获取第一个匹配元素的当前计算输出、像素和高度。
Iphone通过viewDidLoad设置拉伸图像与按钮样式
weixin_30725315的博客
11-17 110
- (void)viewDidLoad{UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"];UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];...
jQuery height() 需要注意的地方
weixin_34211761的博客
07-08 142
var aNode = $('#id'); var height = aNode.height();　　//如果在获取height前，aNode已经是display:none 或者说 aNode是隐藏的，那么获取不到aNode的高度 console.log(height); 转载于:https://www.cnblogs.com/mabelstyle/p/3832346.html...
jQuery中的.height()、.innerHeight()和.outerHeight()的区别
孤城幻夜
12-09 777
转自百度知道：http://zhidao.baidu.com/link?url=skAMoj4yXnywoc0hYKxqGO6WoQzkPQ4m02REBECS5dEcD71OboExwf7dIUJMGEhd0-HLuDb0xiegQLa59BKEvK 在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度，outer
jQuery的height()和JavaScript的height总结，js获取屏幕高度
09-03 4568
jquery的各种高度 首先来说一说$(document)和$(window)，如下： $(document).height();//整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）   用一句话理解就是：当网页滚动条拉到最低端时， $(docu
jquery.fancybox
weixin_33901843的博客
07-20 192
遇到一个很奇怪的问题，在使用 http://www.haorooms.com/post/js_jquery_height http://www.cnblogs.com/zhuwq585/p/5400986.html 在javascript和jquery中，都有对各种高度的写法，在这里，我们就着重讲一下窗口、文档等高度的理解。(宽度和高度差不多！)。 ...
掌握jquery：轻松修改元素CSS height属性技巧
根据给定的文件名称“css_height”，我们知道这个压缩包子文件很可能包含与CSS高度属性相关的内容，可能是一个JavaScript文件，其中使用了jQuery来动态改变元素的高度。 10. jQuery性能优化： 在实际使用jQuery进行...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

河马开源

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值