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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jquery获取节点名称
Apr 26 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
JS实现简易计算器
Feb 14 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 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 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php格式化电话号码的方法
2015/04/24 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js中this用法实例详解
2015/05/05 Javascript
javascript实现拖放效果
2015/12/16 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python I/O与进程的详细讲解
2019/03/08 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Django配置跨域并开发测试接口
2020/11/04 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
服务标语口号
2014/07/01 职场文书
承诺书样本
2014/08/30 职场文书
Python 内置函数速查表一览
2021/06/02 Python
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL