jQuery中innerHeight()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中innerHeight()方法用法。分享给大家供大家参考。具体分析如下:

获取第一个匹配元素内部区域高度。
包括内补白(padding)、不包括边框border)。
也就是说内部区域的宽度等于width和padding之和。
此方法对可见和隐藏元素均有效。
可以结合innerWidth()方法学习。

语法结构:

$(selector).innerHeight()

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

p{

  background-color:green;

  height:100px;

  width:200px;

  padding: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(){ 

    $("p").text($("p").innerHeight()) 

  }); 

}); 

</script>

</head>

<body>

<p>此处显示innerHeight数值</p>

<button>点击查看p的innerHeight</button>

</body>

</html>

上面的代码可以将元素的内部区域的高度写入p元素中。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
Node.js笔记之process模块解读
May 31 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
Javascript基础教程之函数对象和属性
Jan 18 #Javascript
Javascript基础教程之argument 详解
Jan 18 #Javascript
Javascript基础教程之定义和调用函数
Jan 18 #Javascript
Javascript基础教程之break和continue语句
Jan 18 #Javascript
Javascript基础教程之for循环
Jan 18 #Javascript
Javascript基础教程之while语句
Jan 18 #Javascript
Javascript基础教程之switch语句
Jan 18 #Javascript
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
社区国庆节活动方案
2014/02/05 职场文书
xxx同志考察材料
2014/02/07 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
树转促学习心得体会
2014/09/10 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
好媳妇事迹材料
2014/12/24 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS