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版代码高亮
Jun 26 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 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 求质素(素数) 的实现代码
2011/04/12 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python实现的分层随机抽样案例
2020/02/25 Python
什么是python的自省
2020/06/21 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
服务承诺书格式
2014/05/21 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
总结Python常用的魔法方法
2021/05/25 Python
Golang连接并操作MySQL
2022/04/14 MySQL
Rust中的Struct使用示例详解
2022/08/14 Javascript