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中ajax和post处理json的不同示例对比
Nov 02 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 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
很实用的一个完整email发送程序
2006/10/09 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python模块之time模块(实例讲解)
2017/09/13 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
社区文艺活动方案
2014/08/19 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
家电创业计划书
2019/08/05 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python