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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 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
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python实现双色球随机选号
2020/01/01 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
工作表现评语
2014/01/19 职场文书
岗位职责风险防控
2014/02/18 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
结婚保证书范文
2014/04/29 职场文书
单位授权委托书范本
2014/09/26 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电