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 处理表单元素的代码
Feb 15 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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
日本十大惊悚动漫
2020/03/04 日漫
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP框架性能测试报告
2016/05/08 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
工商学院毕业生自荐信
2013/11/12 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
农贸市场管理制度
2014/01/31 职场文书
接待员岗位责任制
2014/02/10 职场文书
对标管理实施方案
2014/03/12 职场文书
关爱留守儿童标语
2014/06/18 职场文书
小学教师工作总结2015
2015/04/07 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
导师鉴定意见
2015/06/05 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技