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 相关文章推荐
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
Python类定义和类继承详解
2015/05/08 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
自荐信如何制作?
2014/02/21 职场文书
职工年度考核评语
2014/12/31 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
法律讲堂观后感
2015/06/11 职场文书
陪护人员误工证明
2015/06/24 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
python办公自动化之excel的操作
2021/05/23 Python
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
基于angular实现树形二级表格
2021/10/16 Javascript