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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
angular分页指令操作
Jan 09 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
php测试kafka项目示例
2020/02/06 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
JS实现打字游戏
2019/12/17 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
python怎么判断素数
2020/07/01 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
布达拉宫导游词
2015/02/02 职场文书
呐喊读书笔记
2015/06/30 职场文书
检讨书范文
2019/04/16 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis