jQuery更改文本后的高度段落就绪事件

jQuery height paragraph ready event after altering text

本文关键字：高度 段落 就绪 事件 文本 jQuery      更新时间：2023-09-26

我在更改包含文本后获取标记的大小时遇到问题。我目前有一个我远远不满意的解决方案。这就是我所说的（为coffeescript道歉，（）=>表示函数（）｛｝）

@textField = $('<'+tag+'></'+tag+'>')
@textField.html(text).delay(120).queue(()=>
    @textField.ready(@onTextReady)
)

如果我去掉延迟，就没有height（），我也不能使用window.load，而且@textfield.load似乎什么都不做。

你对解决这个问题的最佳实践有什么想法？

非常感谢

/

据我所知，元素在添加到DOM之前没有大小。除此之外，我认为尺寸和显示都没有问题。如果您只对大小感兴趣，而不想真正将元素添加到DOM中，我建议您使用可见性。

var $textField = $('<div>').text("FOO").css({
    visibility: "hidden",
    position: "absolute",
    display: "block"
}).appendTo($("body"));
var height = $textField.height();
$textField.remove();
alert(height);

因为JavaScript的单线程特性以及浏览器如何进行HTML渲染。当您将元素添加到DOM树中时，这并不意味着渲染器已经绘制了元素或计算了元素的属性等。您应该将元素添加到DOM树中，然后从JavaScript线程中断，并将访问元素属性的代码放入队列中，以便在渲染后执行。

element.appendChild(aChild); // Adding a child to the DOM tree    
setTimeout(function() {
    aChild.height;           // Accessing the height of the element
},0);                        // Setting the timeout to 0 so that the code
                             // is executed immediately

事实上，这就是你在你的方法中所做的。通过添加delay（）并在超时后执行回调。

我希望这能让你对这个并不罕见的问题有更多的了解。

相关文章：