jQuery + CSS。如何计算innerHTML的高度和宽度？ [英] jQuery + CSS. How do I compute height and width of innerHTML?

问题描述

对于使用jQuery的Web项目，我有一个典型的父子div分层结构。子css没有高度，这允许它根据innerHTML的高度进行扩展和收缩。我以编程方式将HTML标记填充到子元素的innerHTML属性中。

我想设置父元素的高度，以匹配子元素的高度标记。我如何做到这一点？我试过：

  childDiv.innerHTML = content; 
 childDivObject = $（childDiv）; 
 
 parentDivObject = $（parentDiv）; 
 parentDivObject.css（{
height：childDivObject.height（）+px
}）; 
  

但这没有效果。我缺少什么？

UPDATE 0

更多上下文。此代码用于通过用户点击显示/消失的弹出窗口。这里是css。这里只是没有很多事情：

  //父
 .parent {
位置：绝对; 
 top：0; 
 left：0; 
 width：350px; 
 display：none; 
} 
 
 // child 
 .child {
 position：absolute; 
 top：5px; 
 left：5px; 
 right：25px; 
} 
  

可能的事实是父级具有 display：none 是问题的一部分吗？我使用jQuery show（）/ hide（）方法，如果这是相关的。

解决方案通常你会使用回调，但是html（）没有一个，而是有一些东西，叫做promise。

jquery html（）回调函数
http://digitizor.com/2013/08/03/jquery-html-callback-function-using-promise/

  $（'＃divId'）。html（someText）.promise（）。done（function（）{
 // your callback logic / code here 
}）; 
  

I have a typical parent-child div hierarchy for a Web project using jQuery. The child css has not height, this allows it to expand and contract based on the height of the innerHTML. I am programmatically stuffing HTML markup into the innerHTML property of the child.

I want to set the height of the parent to match the height of the child after the child has it's markup. How do I do this? I tried:

    childDiv.innerHTML = content;
    childDivObject = $(childDiv);

     parentDivObject = $(parentDiv);
     parentDivObject.css({
        "height" : childDivObject.height() + "px"
    });

But this did not work. What am I missing?

UPDATE 0

More context. This code is for a popup that appears/disappears with a user tap. Here is the css. There is just not a lot going on here:

// parent
.parent {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    display: none;
}

// child
.child {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 25px;
}

Could the fact that the parent has display:none be part of the problem? I am using the jQuery show()/hide() methods if that is relevant.

解决方案

Normally you would use a callback, but html() doesn't have one, but there's something else, called promise.

jquery html() callback function http://digitizor.com/2013/08/03/jquery-html-callback-function-using-promise/

   $('#divId').html(someText).promise().done(function(){
        //your callback logic / code here
    });

这篇关于jQuery + CSS。如何计算innerHTML的高度和宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！