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 中{},[]中括号,大括号使用详解
May 12 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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
javascript fullscreen全屏实现代码
2009/04/09 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
Python函数学习笔记
2008/10/07 Python
python 生成不重复的随机数的代码
2011/05/15 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python中threading开启关闭线程操作
2020/05/02 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
请解释接口的显式实现有什么意义
2012/05/26 面试题
幼儿教师思想汇报
2014/01/10 职场文书
刊首寄语大全
2014/04/11 职场文书
办理信用卡工作证明
2014/09/30 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS