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代码的实现一个图片向上滚动切换
Sep 02 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
vue router 动态路由清除方式
May 25 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
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
详解vuex的简单使用
2018/03/12 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
js中switch语句的学习笔记
2020/03/25 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
django实现前后台交互实例
2017/08/07 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
团日活动策划书
2014/02/01 职场文书
网络技术专业求职信
2014/05/02 职场文书
联谊活动总结
2014/08/28 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python