jQuery实现获取隐藏div高度的方法示例


Posted in Javascript onFebruary 09, 2017

本文实例讲述了jQuery实现获取隐藏div高度的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>测试获取隐藏div高度</title>
  <meta name="description" content="jquery获取隐藏div高度是可以获取的" />
  <script src="jquery-1.7.2.min.js" ></script>
  <script>
    if(!$){//如果本地没有jquery则加载百度cdn的jquery
      document.write('<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js" ><'+'/script>');
    }
  </script>
  <style>
  .div2{display:none;height:300px;background:green;}
  </style>
  </head>
<body>
  <div id="div1" style="display:none;height:200px;background:red;"></div>
  <div id="div2" class="div2"></div>
  <div id="div3" ></div>
  <script>
    $(function(){
      console.log("style 格式高度:"+$("#div1").height());
      console.log("class格式高度:"+$("#div2").height());
      console.log("设置div3高度为100px");
      $("#div3").css({"height":"100px","background-color":"black"});
      console.log("隐藏div3");
      $("#div3").hide();
      console.log("获取div3高度:"+$("#div3").height());
    });
  </script>
</body>
</html>

运行效果图如下:

jQuery实现获取隐藏div高度的方法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JScript的条件编译
May 29 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
Bootstrap进度条学习使用
Feb 09 #Javascript
详解浏览器渲染页面过程
Feb 09 #Javascript
JavaScript 函数节流详解及方法总结
Feb 09 #Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 #Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 #Javascript
Bootstrap面板学习使用
Feb 09 #Javascript
详解js的异步编程技术的方法
Feb 09 #Javascript
You might like
页面乱码问题的根源及其分析
2013/08/09 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python自动翻译实现方法
2016/05/28 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python实现Flappy Bird源码
2018/12/24 Python
python修改txt文件中的某一项方法
2018/12/29 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Python 实现一个计时器
2020/07/28 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
公司催款律师函
2015/05/27 职场文书
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers