jQuery + CSS。如何计算 innerHTML 的高度和宽度？

Posted 2023-05-07

【中文标题】jQuery + CSS。如何计算 innerHTML 的高度和宽度？

【英文标题】：jQuery + CSS. How do I compute height and width of innerHTML?

【发布时间】：2014-11-21 09:42:01

【问题描述】：

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

我想在孩子拥有它的标记后将父母的高度设置为与孩子的高度相匹配。我该怎么做呢？我试过了：

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

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

但这不起作用。我错过了什么？

更新 0

更多上下文。此代码用于用户点击时出现/消失的弹出窗口。这是CSS。这里没有很多事情发生：

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


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

父母有 display:none 是否是问题的一部分？如果相关，我正在使用 jQuery show()/hide() 方法。

【问题讨论】：

您应该检查每个 HTML 标记插入孩子的高度，然后将高度添加到父 parentDiv.height(childDiv.height());

既然你用的是jquery，你试过childDiv.html(content)吗？插入html后，父级将与子级一起展开而没有问题

您是否在单击以显示父级时将内容插入到子级 div 中？

jQuery 不是这里的问题。问题是：为什么在 innerHTML 填充了标记并正确呈现后，我的 div 报告的高度为 0。

问题出在绝对定位的 2 个元素上。所以子元素在父元素中不占空间

【参考方案1】：

改变这个：

"height" : childDivObject.height() + "px"

到这里：

"height" : childDiv.height() + "px"

看起来您正在尝试获取内容的高度而不是 div 本身。

【讨论】：

David，childDiv 是 DOM 元素，而 childDivObject 只是同一事物的 jQuery 化风格，因此我可以使用 jQuery 方法。当我在设置 innerHTML 后调用 childDivObject.height() 时，我得到的高度为 0。即使 div 正确呈现。不设置innerHTML会触发元素高度/宽度的设置吗？我不明白。

不能通过不对父级应用任何高度来解决这个问题吗？也许一个 jsfiddle 可以帮助我们理解这个问题

【参考方案2】：

知道了。因为 jQuery 切换 css 显示属性以隐藏/显示弹出窗口。

答案就是这样做：

    parentDivObject.css(
        "left": left + "px",
        "top" : top  + "px"
    ).show();

    parentDivObject.css(
        "height": childDivObject.height() + "px"
    );

我在切换显示的 jQuery show() 方法之后设置高度，然后高度变为有效。它不漂亮，但它有效。干杯。

【讨论】：

是的，您没有解决问题的主要原因，您只是找到了解决方法.. 这是一些丑陋的代码：/

George，实际上我认为这是一个错误，如果没有显示，则无法在元素上设置高度/宽度/任何内容。考虑到网络工具的毛球，我认为我的方法没有任何问题。

【参考方案3】：

通常你会使用回调，但 html() 没有回调，但还有其他东西，称为 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
    );

【讨论】：

George, .html(content, function() // do stuff ) 不会触发。 .html(content).innerHeight() 报告 0 高度。然而，内容呈现正确。这些都没有任何意义。

改变了我的答案。回调在 html() 上不起作用，你需要一个 promise。

承诺（）？你是在开玩笑吧？我的意思是这是一种实际的方法吗？

George，根本问题是不能在具有 display:none 的元素上设置高度。奇怪的是，我可以设置顶部/左侧完全不一致。就好像这一切都被设计成一种浪费时间的 Web 开发体验。叹息。