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中的string.format函数代码
Aug 11 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
基于JavaScript实现瀑布流布局
Aug 15 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
在vue中使用防抖函数组件操作
2020/07/26 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python 判断网络连通的实现方法
2018/04/22 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
学子宴答谢词
2014/01/25 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Nginx配置之禁止指定IP访问
2022/05/02 Servers