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 遍历json数组的实现代码
Sep 22 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
javascript的this关键字详解
May 20 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 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实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
python删除文件示例分享
2014/01/28 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python数据结构之图的应用示例
2018/05/11 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Pytorch转tflite方式
2020/05/25 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
大学生的网上创业计划书
2013/12/31 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
高考1977观后感
2015/06/04 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书