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判断用户浏览器插件安装情况的代码
Jan 01 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
计数器详细设计
2006/10/09 PHP
php md5下16位和32位的实现代码
2008/04/09 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
js中function()使用方法
2013/12/24 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python机器学习之神经网络实现
2018/10/13 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
Shell编程面试题
2016/05/29 面试题
慰问敬老院活动总结
2014/04/26 职场文书
父亲节感言
2015/08/03 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
Python基本的内置数据类型及使用方法
2022/04/13 Python