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经典效果集锦
Jul 06 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
vue.js表格分页示例
Oct 18 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
详解用node编写自己的cli工具
May 23 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
vue路由分文件拆分管理详解
Aug 13 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经典算法集锦
2015/11/14 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP加密技术的简单实现
2016/09/04 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python几种常见算法汇总
2020/06/02 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
Java程序员常见面试题
2015/07/16 面试题
《草原》教学反思
2014/02/15 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
简易版租房协议书范本
2014/10/13 职场文书
商家认证委托书格式
2014/10/16 职场文书
泰山导游词
2015/02/02 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python