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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
JQuery基础语法小结
Feb 27 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
JavaScript 乱码问题
2009/08/06 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
js 内存释放问题
2010/04/25 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
投诉信范文
2015/07/02 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL