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 相关文章推荐
浅谈Javascript面向对象编程
Nov 15 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JavaScript中this详解
Sep 01 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
如何实现小程序tab栏下划线动画效果
May 18 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学习之 循环结构实现代码
2011/06/09 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript操作数组详解
2014/12/17 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
城市轨道专业个人求职信范文
2013/09/23 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
初二生物教学反思
2014/02/03 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
办护照工作证明
2014/10/01 职场文书
经营场所证明范本
2015/06/19 职场文书
企业安全生产检查制度
2015/08/06 职场文书
商场广播稿范文
2015/08/19 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技