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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 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
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP解析RSS的方法
2015/03/05 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
对python数据切割归并算法的实例讲解
2018/12/12 Python
python批量解压zip文件的方法
2019/08/20 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
“学雷锋活动月”总结
2014/03/09 职场文书
三好生演讲稿
2014/09/12 职场文书
税务会计岗位职责
2015/04/02 职场文书
生日赠语
2015/06/23 职场文书