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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
vue实现标签云效果的方法详解
Aug 28 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
javascript轮播图算法
2016/10/21 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python中的itertools的使用详解
2020/01/13 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Django中的AutoField字段使用
2020/05/18 Python
什么是python的列表推导式
2020/05/26 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
化学教师自荐信范文
2013/12/28 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
求职信模板
2014/05/23 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书