jQuery中height()方法用法实例


Posted in Javascript onDecember 24, 2014

本文实例讲述了jQuery中height()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以获取或者设置匹配元素的高度值,默认单位是px。

语法结构一:

$(selector).height()

不带参数的时候是返回第一个匹配元素的当前高度。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  alert($("div").height()); 

}) 

</script>

</head>

<body>

<div></div>

</body>

</html>

语法结构二:

$(selector).height(val)

带参数的时候是设置所有匹配元素的高度,默认单位是px,当然也可以使用其他的单位如em或者百分比等等。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").height("200px") 

  }) 

}) 

</script>

</head>

<body>

<div></div>

<button>点击查看效果</button>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
jQuery中width()方法用法实例
Dec 24 #Javascript
jQuery中animate()方法用法实例
Dec 24 #Javascript
jQuery中fadeOut()方法用法实例
Dec 24 #Javascript
创建js对象和js类的方法汇总
Dec 24 #Javascript
javascript使用prototype完成单继承
Dec 24 #Javascript
jQuery中slideUp()方法用法分析
Dec 24 #Javascript
node.js开机自启动脚本文件
Dec 24 #Javascript
You might like
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
记录Django开发心得
2014/07/16 Python
Python的设计模式编程入门指南
2015/04/02 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python实现自动登录后台管理系统
2018/10/18 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
如何转换一个字符串到enum值
2014/04/12 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
大四学年自我鉴定
2013/11/13 职场文书
最新创业融资计划书
2014/01/19 职场文书
触电现场处置方案
2014/05/14 职场文书
行政求职信
2014/07/04 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
党性分析自查总结
2014/10/14 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2015年派出所工作总结
2015/04/24 职场文书
德能勤绩工作总结
2015/08/11 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python