Рассчитать ширину и высоту текста на Javascript

JavaScript, Вопросы и ответы
28 февраля 2012

Вопрос

Я ищу способ на чистом Javascript получить (рассчитать?) ширину и высоту строки при заданном размере шрифта. Есть ли какие-нибудь способы это сделать?


Ответ №1

Создайте DIV и назначьте ему следующие стили. В Вашем JavaScript задайте размер шрифта и те свойства, с которыми Вы хотите измерить длину текста, поместите Вашу строку в DIV, затем получите текущую ширину и высоту этого DIV-а. Он растянется по длине контента и его ширина и высота будут равны ширине и высоте текста, который находится в нём.

<div id="test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
#test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space:nowrap;
}
var test = document.getElementById("test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";

Здесь я размещу пример, который позволит протестировать код выше. Введите текст в текстовое поле, и нажмите на кнопку с тем размером шрифта, для которого Вы хотите измерить размер текста.

Пример




1 комментарий

Добавить комментарий


(обязательно)