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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
jquery cookie的用法总结
Nov 18 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
vue路由缓存的几种实现方式小结
Feb 02 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
摘自启点的main.js
2008/04/20 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
js的三种继承方式详解
2017/01/21 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
幼儿园消防演练方案
2014/02/13 职场文书
公立医院改革实施方案
2014/03/14 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
节能宣传周活动总结
2014/05/08 职场文书
学校节能减排方案
2014/06/13 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python