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实现图片的前进与后退功能
Apr 24 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
React实现todolist功能
2020/12/28 Javascript
基于python实现微信模板消息
2015/12/21 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
windows下python安装小白入门教程
2018/09/18 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
借款协议书
2014/04/12 职场文书
电视节目策划方案
2014/05/16 职场文书
演讲稿开场白台词
2014/08/25 职场文书
经典演讲稿开场白
2014/08/25 职场文书
八项规定对照检查材料
2014/08/31 职场文书
任长霞观后感
2015/06/16 职场文书
小学教师教学随笔
2015/08/14 职场文书
旷工检讨书大全
2015/08/15 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers