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 中的事件教程
Apr 05 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
vue插件实现v-model功能
Sep 10 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
学习php笔记 字符串处理
2010/10/19 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
网页常用特效代码整理
2006/06/23 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
js表单登陆验证示例
2016/10/19 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Django操作session 的方法
2020/03/09 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
小露珠教学反思
2014/04/30 职场文书
党员民主评议总结
2014/10/20 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
SpringBoot Http远程调用的方法
2022/08/14 Java/Android