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函数库-集合框架
Apr 27 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JS实现520 表白简单代码
May 21 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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
PHP新手上路(九)
2006/10/09 PHP
解析php中的escape函数
2013/06/29 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
javascript实现下雨效果
2017/03/27 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
python中的字典使用分享
2016/07/31 Python
python生成ppt的方法
2018/06/07 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
设置python3为默认python的方法
2018/10/31 Python
对pandas处理json数据的方法详解
2019/02/08 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
如何完美的建立一个python项目
2020/10/09 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
人力管理专业毕业生求职信
2014/02/27 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
李强优秀员工观后感
2015/06/16 职场文书