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 相关文章推荐
PHP守护进程实例
Mar 06 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
详解Vue组件实现tips的总结
Nov 01 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
收音机术语解释
2021/03/01 无线电
php判断正常访问和外部访问的示例
2014/02/10 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
js实现拖拽功能
2017/03/01 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
小程序实现列表多个批量倒计时
2021/01/29 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python max内置函数详细介绍
2016/11/17 Python
python 计算文件的md5值实例
2017/01/13 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python算法题 链表反转详解
2019/07/02 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
解析Python3中的Import
2019/10/13 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
小学生秋游活动方案
2014/02/23 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
MySQL通过binlog恢复数据
2021/05/27 MySQL
Python pyecharts绘制条形图详解
2022/04/02 Python