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 对Cookie 操作的封装小结
Dec 31 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
vue多次循环操作示例
Feb 08 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
vue ref如何获取子组件属性值
Mar 31 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
javascript 函数式编程
2007/08/16 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
JS实现self的resend
2010/07/22 Javascript
js常用代码段整理
2011/11/30 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
git进行版本控制心得详谈
2017/12/10 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python理解递归的方法总结
2019/01/28 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
活动总结范文
2014/08/30 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
学生个人评语大全
2015/01/04 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers