Question

我在更改包含文本后遇到标记大小的问题。我目前有一个我很满意的解决方案。这就是我所拥有的（为coffeescript道歉，（）=＆gt;意味着函数（）{}）

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

如果我删除延迟，没有高度（），我也不能使用window.load，@ textfield.load似乎什么也没做。

您对解决此问题的最佳做法有何看法？

非常感谢

/ A

Answer 1

据我所知，元素在添加到DOM之前没有大小。不仅如此，我认为存在尺寸问题并且没有显示。如果您只对尺寸感兴趣而不是实际将元素添加到DOM，我建议您使用可见性。

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

Answer 2

由于JavaScript的单线程特性以及浏览器如何完成HTML呈现。向DOM树添加元素时，这并不意味着渲染器已绘制元素或计算元素的属性等。您应该将该元素添加到DOM树，然后从JavaScript线程中 break ，并将访问元素属性的代码放入队列中，以便在渲染后执行它。

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（）并在超时后执行回调。

我希望这能让你对这个不那么罕见的问题有更深入的了解。

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

2 个答案: