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 判断元素上是否绑定了事件
Oct 28 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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一些有意思的小区别
2006/12/06 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python编程实现希尔排序
2017/04/13 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python引用计数操作示例
2018/08/23 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
护士自荐信怎么写
2013/10/18 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
学校募捐倡议书
2014/05/14 职场文书
初中班级口号
2014/06/09 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python