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 滑入滑出效果实现代码
Mar 27 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
js+canvas实现五子棋小游戏
Aug 02 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
mysql 搜索之简单应用
2007/04/27 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php中的ini配置原理详解
2014/10/14 PHP
php实现的验证码文件类实例
2015/06/18 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Python学习之time模块的基本使用
2021/01/17 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
销售类个人求职信范文
2013/09/25 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
货车司机岗位职责
2014/03/18 职场文书
淘宝好评语大全
2014/05/05 职场文书
班级心理活动总结
2014/07/04 职场文书
2014年售票员工作总结
2014/11/19 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书