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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
Javascript之Date对象详解
Jun 07 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
Vue extend的基本用法(实例详解)
Dec 09 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
Apache设置虚拟WEB
2006/10/09 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php连接mysql数据库代码
2009/03/10 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php数组查找函数总结
2014/11/18 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
javascript中in运算符用法分析
2015/04/28 Javascript
js密码强度校验
2015/11/10 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
JavaScript字符串对象
2017/01/14 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
webpack之devtool详解
2018/02/10 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
业务代表的岗位职责
2013/11/16 职场文书
个人违纪检讨书
2014/09/15 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2014年六五普法工作总结
2014/11/25 职场文书