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 开天辟地入门篇一
Dec 09 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
详解ES7 Decorator 入门解析
Feb 18 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关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
PHP实现简单日历类编写
2020/08/28 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
script标签属性用type还是language
2015/01/21 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
原生js编写焦点图效果
2016/12/08 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
canvas绘制七巧板
2017/02/03 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
webpack多页面开发实践
2017/12/18 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python实现石头剪刀布程序
2021/01/20 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
公司应聘自荐书
2014/06/14 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python