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 new 需不需要继续使用
Jul 02 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
javascript时区函数介绍
Sep 14 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
javascript操作css属性
Dec 30 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
详解Angular 4.x Injector
May 04 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
详解es6新增数组方法简便了哪些操作
May 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
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
Python人脸识别初探
2017/12/21 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
迟到检讨书5000字
2014/01/31 职场文书
称象教学反思
2014/02/03 职场文书
学生党支部先进事迹
2014/02/04 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
邀请函的格式
2015/01/30 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL