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控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
前端性能优化建议
Sep 17 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
vue3中的组件间通信
Mar 31 Vue.js
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
Protoss热键控制
2020/03/14 星际争霸
php读取html并截取字符串的简单代码
2009/11/30 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP速成大法
2015/01/30 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python操作redis的方法
2015/07/07 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
详解python分布式进程
2018/10/08 Python
Django中的用户身份验证示例详解
2019/08/07 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
视光学专业自荐信
2014/06/24 职场文书
计划生育责任书
2015/05/09 职场文书
领导视察通讯稿
2015/07/18 职场文书
新郎婚礼致辞
2015/07/27 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers