Измерьте размер текста в JavaScript - PullRequest
Новая
       8

Измерьте размер текста в JavaScript

4 голосов
/ 18 мая 2010

Я хочу измерить размер текста в JavaScript. Пока это не так сложно, потому что я могу просто поместить временный невидимый div в дерево DOM и проверить offsetWidth и offsetHeight. Проблема в том, что я хочу сделать это ДО того, как DOM будет готов. Вот заглушка: 

<html>
  <head>
    <script type="text/javascript">

    var text = "Hello world";
    var fontFamily = "Arial";
    var fontSize = 12;

    var size = measureText(text, fontSize, fontFamily);

    function measureText(text, fontSize, fontFamily)
    {
        // TODO Implement me!
    }      

    </script>
  </head>
  <body>
  </body>
</html>

Опять же: я ЗНАЮ, как сделать это асинхронно, когда DOM (или тело) сигнализирует о готовности. Но я хочу сделать это синхронно прямо в шапке, как показано в заглушке выше. Есть идеи, как мне это сделать? Мое текущее мнение таково, что это невозможно, но, возможно, у кого-то есть сумасшедшая идея.

Ответы [ 2 ]

4 голосов
/ 18 мая 2010

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

Переместите скрипт внутрь <body>. Теперь document.body существует, поэтому вы можете document.body.insertBefore(myspan, document.body.firstChild). (Но не appendChild, иначе вы поместите элемент поверх того, где находится синтаксический анализатор, что обычно нарушит IE.)

Могут быть более сложные обходные пути (возможно, с использованием canvas и measureText() для этого?), Но это будет намного проще.

1 голос
/ 18 мая 2010

Извините, но нет сумасшедшей идеи. Когда DOM не готов, невозможно добавить к нему узел, поэтому невозможно делать то, что вы хотите, в тот момент, когда вы хотите.

Более раннее событие, которое существует и сообщает вам, что dom готов, - это событие DOMContentLoaded, которое имеет другие имена в различных реализациях браузеров.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...