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 Function函数类型介绍
Apr 08 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
javascript基本语法
May 31 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
js实现select下拉框选择
Jan 11 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 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 神盾解密
2014/06/08 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
java必学必会之static关键字
2015/12/03 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python函数定义和调用过程详解
2020/02/09 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
医院护士的求职信
2014/01/03 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
竞争上岗实施方案
2014/03/21 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
个人批评与自我批评
2014/10/15 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
投诉书范文
2015/07/02 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Windows7下FTP搭建图文教程
2022/08/05 Servers