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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
linux面试题参考答案(5)
2014/09/01 面试题
优秀大专毕业生求职信
2014/08/04 职场文书
团队拓展活动方案
2014/08/28 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
老人与海读书笔记
2015/06/26 职场文书
英语读书笔记
2015/07/02 职场文书
编写python程序的90条建议
2021/04/14 Python
Golang 编译成DLL文件的操作
2021/05/06 Golang
pytorch中的numel函数用法说明
2021/05/13 Python
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
tomcat下部署jenkins的方法
2022/05/06 Servers