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 相关文章推荐
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
vue-router 控制路由权限的实现
Sep 24 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获取mysql版本的几种方法小结
2008/03/25 PHP
php实现rc4加密算法代码
2012/04/25 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
新浪的图片新闻效果
2007/01/13 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
python requests 使用快速入门
2017/08/31 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python爬虫教程知识点总结
2020/10/19 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
办公室前台岗位职责
2014/01/04 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
英文感谢信格式
2015/01/21 职场文书
商业计划书范文
2019/04/24 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书