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

最新推荐文章于 2024-02-24 19:11:33 发布
最新推荐文章于 2024-02-24 19:11:33 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rotating_windmill/article/details/8168043
版权
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>



 















河马开源
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用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 984
jQuery height( ) 方法可用于设置或返回被选元素的高度。当该方法用于返回高度时， 则返回第一个匹配元素的高度。 当该方法用于设置高度时，则设置所有匹配元素的高度。
jQuery中的height()、innerheight()、outerheight()的区别总结
weixin_30782331的博客
01-07 106
在前端jQuery代码中突然看到outerheight(),第一感觉就是，这是什么鬼？然后仔细查阅了一下，居然发现还有这么多相似的东西。 在jQuery中，获取元素高度的函数有3个，它们分别是height()、innerHeight()、outerHeight()。 与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、innerWidth()、outerWidth()。 ...
jquery height() innerHeight () outerHeight( )
JiM-W 的博客
01-16 526
height innerHeight outerHeight
jquery的height()和javascript的height总结，js获取屏幕高度
weixin_30868855的博客
11-07 97
jquery的height()和javascript的height总结，js获取屏幕高度在javascript和jquery中，都有对各种高度的写法，在这里，我们就着重讲一下窗口、文档等高度的理解。(宽度和高度差不多！)jquery的各种高度首先来说一说$(document)和$(window)，如下：$(document).height();//整个网页的高度$(window).height()...
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 1478
$(window).height(); //浏览器当前窗口可视区域高度$(document).height(); //浏览器当前窗口文档的高度$(document.body).height();//浏览器当前窗口文档body的高度$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin$(windo...
JQ height()、innerHeight()、outerHeight()函数的区别
一直专注于互联网
02-28 349
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。   下...
jq 关于height
好学
11-18 150
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 1009
Height()方法获取第一个匹配元素的当前计算输出、像素和高度。
Iphone通过viewDidLoad设置拉伸图像与按钮样式
weixin_30725315的博客
11-17 72
- (void)viewDidLoad{UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"];UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];...
jQuery height() 需要注意的地方
weixin_34211761的博客
07-08 104
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 713
转自百度知道：http://zhidao.baidu.com/link?url=skAMoj4yXnywoc0hYKxqGO6WoQzkPQ4m02REBECS5dEcD71OboExwf7dIUJMGEhd0-HLuDb0xiegQLa59BKEvK 在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度，outer
JQuery height()、innerHeight()、outerHeight()、outerHeight(true)
椒盐薄荷糖
05-18 917
用于获取元素高度的四个函数。以盒子模型为例。1、height() 获取元素content的高度2、innerHeight()  获取匹配元素集合中第一个元素的当前计算的内部高度，包括顶部和底部的padding+content。不适用于window和document对象。3、outerHeight() 获取匹配元素集合的第一个元素的当前计算的外部高度，包括顶部和底部的padding和border、c...
jquery关于height的一些方法解释
anmi8562的博客
07-12 188
直接看代码，里面有解释： <!-- jquery关于height的知识点 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <...
jQuery Grid 初始化函数 高度自适应
06-09
让 jQuery Grid 的高度自适应的方法和前面的宽度自适应类似，也是通过监听窗口大小变化来实现的。具体代码如下： ```javascript function initGrid(gridSelector) { var width = $('.jqGrid_wrapper').width(); $(gridSelector).jqGrid({ // Grid配置项 ... }); $(window).bind('resize', function () { var width = $('.jqGrid_wrapper').width(); $(gridSelector).setGridWidth(width); var gridHeight = $(window).height() - $('.jqGrid_wrapper').offset().top - 130; $(gridSelector).jqGrid('setGridHeight', gridHeight); }).trigger('resize'); } ``` 在上述代码中，我们仍然是通过 `$(window).bind('resize', function(){...})` 来监听窗口大小变化，并在回调函数中获取窗口的高度，计算 Grid 的高度并设置。其中 `$(window).height()` 获取窗口的高度，`$('.jqGrid_wrapper').offset().top` 获取 Grid 距离文档顶部的距离。对于 `130` 这个数值，你可以根据自己的实际情况进行调整，以达到最佳的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

河马开源

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

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

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

打赏作者

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

抵扣说明：

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

余额充值