在前端中为了某种需要,我们需要获取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. React native 的弹出层(输入)效果

    /*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...

  2. OFFSET 函数

    转自http://office.microsoft.com/zh-cn/excel-help/HP010342739.aspx OFFSET 函数 全部显示 全部隐藏 本文介绍 Microsoft E ...

  3. T2 Func<in T1,out T2>(T1 arg)

    委托调用方法的4种方式. using System; using System.Collections.Generic; namespace ConsoleApplication1 { delegat ...

  4. [lua大坑]一个莫名其妙的lua执行时崩溃引出的堆栈大小问题

    这是一个坑,天坑!如果不是我随手删除了一个本地变量,这个问题直到现在我应该也没有头绪. 首先,写了一个新的lua脚本,载入,执行.在执行的时候,出了这么一个莫名其妙的问题: EXC_BAD_ACCES ...

  5. Thinking in Java——笔记(15)

    Generics The term "generic" means "pertaining or appropriate to large groups of class ...

  6. jquery给net里面的RadioButtonList添加选项改变事件

    <script type="text/JavaScript" src="../../../JS/jQuery-1.4.1.min.js"></ ...

  7. CPP - sort

    #include "stdafx.h" #include <iostream> #include <string> using namespace std; ...

  8. Java Basic - Annotation

    使用注解最主要的部分在于对注解的处理,那么就会涉及到注解处理器.      从原理上讲,注解处理器就是通过反射机制获取被检查方法上的注解信息,然后根据注解元素的值进行特定的处理.   注解处理器类库( ...

  9. PHP while使用

    $i = 0; while(true){ if($i == 0){ $i++; continue; }else if($i > 10){ break; }else{ echo $i." ...

  10. vert.x学习(三),Web开发之Thymeleaf模板的使用

    在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...