JavaScript: проверьте ширину объекта <div>перед его размещением

Question

Рассмотрим:

$("#PlotPlace").append('<div style="position:absolute;left:200px;top:40px;font-size:smaller">Hello world!</div>');

Мне нужно выполнить эту строку, только если ширина результирующего текста будет меньше 60 пикселей. Как проверить ширину перед размещением объекта?

Answer 1

К сожалению, div будет иметь значение ширины только после рендеринга в DOM.

Я бы добавил это содержимое в незаметную область документа, возможно, даже абсолютно расположенную так, чтобы не происходило нарушение потока, и убедился бы, что для него установлено значение «видимость: скрыто». Таким образом, он будет вставлен в DOM и отрендерен, но невидим для зрителя.

Затем вы можете проверить ширину на нем, переместить его в положение и установить для него «видимость: видимый» в этой точке. В противном случае вы можете удалить его из документа.

Answer 2

Может быть, вы можете добавить его невидимым, затем проверить его ширину, а затем рассмотреть возможность показать или скрыть.

Answer 3

$("#PlotPlace").append('<div style="position:absolute;left:9001px;top:40px;font-size:smaller">Hello world!</div>');

var div = $('#PlotPlace').children("div");

if(div.width() < 60)
    div.css({left:200})

Answer 4

Вы не можете. По крайней мере, не все так просто. Вставляемый текст пишется определенным шрифтом, который должен отображаться браузером, тогда вы знаете ширину элемента. Кстати, что именно вы хотите вставить, с таким ограничением? Не проще ли вырезать текст в выходных параметрах?

Answer 5

Похоже, что-то, что вы должны взломать. Я не верю, что во время выполнения JavaScript в любом браузере есть событие, которое вы можете зацепить между вычислением макета и отображением элемента, так что вы можете добавить его так, чтобы его не было видно и не влияло на высоту. (не вызывает дополнительной прокрутки), а затем показать / скрыть его в зависимости от ширины в этой точке. Это хакерский и уродливый, но поскольку у вас не так много перехватчиков событий, это может быть единственный способ сделать это.