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 相关文章推荐
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
layui动态表头的实现代码
Aug 22 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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获取文件名后缀常用方法小结
2015/02/24 PHP
js 替换
2008/02/19 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
VUE重点问题总结
2018/03/19 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
pycham查看程序执行的时间方法
2018/11/29 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
python实现ip地址的包含关系判断
2020/02/07 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
签约仪式致辞
2015/07/30 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL