在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那么它们的高度都会是0,就算元素中有文字或者其它内容。

解决办法:
通过jquery的show方法先展示出来,再在回调函数中获取它们的高度并操作即可,代码如下:
$(".box").show(0,function(){
  var h = $(".box").outerHeight();
  console.log(h);
})

这样我们就可以获取到box的实际高度了。

当display=none时,元素和子元素高度为0的解决办法的更多相关文章

  1. html 关于内部是float元素的外部div高度为0的解决方法!

    最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的 ...

  2. ecshop 秒杀并发时库存会被减到小于0的解决办法

    ecshop 秒杀并发时库存会被减到小于0更新库存后,再进行库存检查,如果库存为负数,则执行事务的回滚. begin();//开始一个事物处理开始 $sql = "UPDATE " ...

  3. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  4. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  5. jquery获取元素(父级的兄弟元素的子元素)

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  6. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  7. 在Js中得到元素的子元素集合注意事项

    http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...

  8. jQuery中的层级选择器(四、二):后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  9. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

随机推荐

  1. mysql刷日志的两个参数

    innodb_flush_log_at_trx_commit 0:每秒 ----log---disk1:事物提交 ---log ---disk2:事物提交---log 每秒 ---disk sync_ ...

  2. 建设移动端web开发会涉及到的meta标签

    <meta name="format-detection" content="telephone=no"> <meta name=" ...

  3. 【最简单IOC容器实现】实现一个最简单的IOC容器

    前面DebugLZQ的两篇博文: 浅谈IOC--说清楚IOC是什么 IoC Container Benchmark - Performance comparison 在浅谈IOC--说清楚IOC是什么 ...

  4. Android课程---添加黑名单的练习(课堂讲解)

    DBHelper.java package com.hanqi.test3; import android.content.Context; import android.database.sqlit ...

  5. 设计模式之六大原则——开闭原则(OCP)

    转载于: http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793454.html 开闭原则(Open Closed Principle)是Ja ...

  6. rabbitmq method之basic.consume

    basic.consume指的是channel在 某个队列上注册消费者,那在这个队列有消息来了之后,就会把消息转发到给此channel处理,如果 这个队列有多个消费者,则会采用轮转的方式将消息分发给消 ...

  7. erlang文章博客推荐

    博客排名不分先后. 诸霸,http://blog.yufeng.info/. 淘宝核心系统资深技术专家,真的是专家,了解erlang已不久局限于erlang,而且现在也一直在更新技术博文,和陈晧一样. ...

  8. jQuery 实时监听<input>输入值的变化

    这方法比 on('keydown') 更实时 <input type='text' id='input1'/>$(document).ready(function(){ $('#input ...

  9. freebsd 系统时间

    http://blog.csdn.net/wowoto/article/details/5557810 https://www.douban.com/note/150233427/ date #查看当 ...

  10. mongodb数据库迁移

    如果遇到权限问题,终极解决办法:关掉权限! 如:assertion: 18 { ok: 0.0, errmsg: "auth failed", code: 18 }等错误