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 Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
Vue详细的入门笔记
May 10 Vue.js
React Native项目框架搭建的一些心得体会
May 28 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 MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python 调用c语言函数的方法
2017/09/29 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
python 如何引入协程和原理分析
2020/11/30 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
材料采购员岗位职责
2013/12/17 职场文书
档案检查欢迎词
2014/01/13 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
2015年清明节活动总结
2015/02/09 职场文书
煤矿安全保证书
2015/02/27 职场文书
试用期自我评价范文
2015/03/10 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
法定代表人身份证明书
2015/06/18 职场文书
离职信范本
2015/06/23 职场文书
安全教育培训制度
2015/08/06 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis