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 相关文章推荐
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
js简单抽奖代码
Jan 16 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php过滤危险html代码
2008/08/18 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
详解Python中的文件操作
2016/08/28 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python 基于opencv操作摄像头
2020/12/24 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
暖春观后感
2015/06/08 职场文书
红歌会主持词
2015/07/02 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers