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事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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原理之变量(Variables inside PHP)
2013/08/09 PHP
小谈php正则提取图片地址
2014/03/27 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python中threading开启关闭线程操作
2020/05/02 Python
汽车检测与维修个人求职信
2013/09/24 职场文书
项目建议书格式
2014/03/12 职场文书
三年级评语大全
2014/04/23 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
2014年居委会工作总结
2014/12/09 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
如何利用python创作字符画
2022/06/25 Python