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 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
js实现秒表计时器
Dec 16 Javascript
ES6中的类(Class)示例详解
Dec 09 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 生成WML页面方法详解
2009/08/09 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
js实现楼层导航功能
2017/02/23 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
顶碗少年教学反思
2014/02/21 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
医院领导班子整改方案
2014/10/01 职场文书
关于远足的感想
2015/08/10 职场文书
新年寄语2016
2015/08/17 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL