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 相关文章推荐
JS backgroundImage控制
May 19 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
JS实现简单九宫格抽奖
Jun 28 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+DBM的同学录程序(4)
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
vue实现通讯录功能
2018/07/14 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
python的re模块应用实例
2014/09/26 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
励志演讲稿大全
2014/08/21 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2016高考感言
2015/08/01 职场文书