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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
取选中的radio的值
Jan 11 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python二分法搜索算法实例分析
2015/05/11 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
小学教师评语大全
2014/04/23 职场文书
党员作风建设整改方案
2014/10/27 职场文书
2014年科室工作总结
2014/11/20 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技