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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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
详谈PHP编码转换问题
2015/07/28 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
高二地理教学反思
2014/01/24 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电