jQuery中outerHeight()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中outerHeight()方法用法。分享给大家供大家参考。具体分析如下:

此方法获取第一个匹配元素外部高度。
默认情况下外部高度是高度(height)、内补白(padding)和边框(border)之和。
如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度。
此方法对可见和隐藏元素均有效。
可以与outerWidth()方法结合学习。

语法结构:

$(selector).outerHeight(options)

参数列表:

参数 描述
options 定义是否把外补白(margin)计算在内: 一.fase,边距不计算在内,默认值。 二.true,边距计算在内。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>outerHeight()函数-三水点靠木</title>

<style type="text/css">

div{

  background-color:green;

  height:100px;

  width:200px;

  padding:10px;

  margin:10px;

  border:5px solid red;

}   

</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").text($("div").outerHeight(true))

  })

})

</script>

</head>

<body>

  <div>此处显outerHeight数值</div>

  <button>点击查看div的outerHeight</button>

</body>

</html>

点击按钮可以显示div元素外部高度。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js实现将选中值累加到文本框的方法
Aug 12 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
Position属性之relative用法
Dec 14 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
vuex实现购物车功能
Jun 28 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 #Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 #Javascript
jQuery中innerHeight()方法用法实例
Jan 19 #Javascript
Javascript基础教程之函数对象和属性
Jan 18 #Javascript
Javascript基础教程之argument 详解
Jan 18 #Javascript
Javascript基础教程之定义和调用函数
Jan 18 #Javascript
Javascript基础教程之break和continue语句
Jan 18 #Javascript
You might like
PHP 创建标签云函数代码
2010/05/26 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
微信小程序实现星级评分和展示
2018/07/05 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
详解Python中的条件判断语句
2015/05/14 Python
Python探索之创建二叉树
2017/10/25 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
python实现支付宝转账接口
2019/05/07 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
汇科协同Java笔试题
2012/03/31 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
战友聚会邀请函
2014/01/18 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
《搭石》教学反思
2016/02/18 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
Oracle锁表解决方法的详细记录
2022/06/05 Oracle