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 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
Vue实现多页签组件
Jan 14 Vue.js
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php根据年月获取季度的方法
2014/03/31 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
javascript new fun的执行过程
2010/08/05 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python排序函数的使用方法详解
2020/12/11 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
大学毕业感言
2014/01/10 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
办公用品质量保证书
2015/05/11 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫