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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python中str.format()详解
2017/03/12 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
开业庆典策划方案
2014/02/18 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
新手上路标语
2014/06/20 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
介绍长城的导游词
2015/01/30 职场文书
岳麓书院导游词
2015/02/03 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python