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参数的小问题
Mar 02 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
vue 自定义右键样式的实例代码
Nov 06 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 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上传图片类及用法示例
2016/05/11 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
vuex分模块后,实现获取state的值
2020/07/26 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python实现自动发送报警监控邮件
2018/06/21 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
学习Python爬虫的几点建议
2020/08/05 Python
美国创意之家:BulbHead
2017/07/12 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
经典的毕业生自荐信范文
2014/04/14 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
土地租赁意向书
2014/07/30 职场文书
初中家长评语和期望
2014/12/26 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
慰问信模板
2015/02/14 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
python playwrigh框架入门安装使用
2022/07/23 Python