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中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
使用JavaScript破解web
Sep 28 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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 无极分类(递归)实现代码
2010/01/05 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
网上抓的一个特效
2007/05/11 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
js canvas实现俄罗斯方块
2020/10/11 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
美国羊皮公司:Overland
2018/01/15 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
外包公司软件测试工程师
2014/11/01 面试题
工作表扬信的范文
2014/01/10 职场文书
学校献爱心活动总结
2014/07/08 职场文书
人民调解协议书范本
2014/10/11 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python