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 UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
vue 实现超长文本截取,悬浮框提示
Jul 29 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工厂模式的好处
2013/06/18 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
JS实现简易换图时钟功能分析
2018/01/04 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
单链表反转python实现代码示例
2018/02/08 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
行政经理岗位职责
2013/11/09 职场文书
协议书模板
2014/04/23 职场文书
生态养殖创业计划书
2014/05/06 职场文书
基层党员公开承诺书
2014/05/29 职场文书
上班离岗检讨书
2014/09/10 职场文书
校园安全广播稿范文
2014/09/25 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
运动会报道稿大全
2015/07/23 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers