Иногда нам нужно рассчитать ширину текстового содержимого в нашем коде JavaScript.
В этой статье мы рассмотрим, как рассчитать ширину текстового содержимого в нашем коде JavaScript.
clientHeight и clientWidth
Свойства clientHeight и clientWidth объекта HTML-элемента позволяют нам получить высоту и ширину элемента.
Следовательно, мы можем написать следующий HTML:
<p id='text'> hello world </p>
для создания элемента.
Затем мы можем написать кодировщик JavaScript, чтобы получить высоту и ширину элемента:
const fontSize = 12;
const text = document.getElementById("text");
text.style.fontSize = fontSize;
const height = text.clientHeight
const width = text.clientWidth
console.log(height, width);
Мы получаем элемент p с getElementById.
Затем мы используем свойства clientHeight и clientWidth, чтобы получить высоту и ширину элемента p соответственно.
Затем мы регистрируем это с помощью консоли.
У нас должно получиться что-то вроде:
18 222
из журнала консоли.
Цифры в пикселях.
Canvas.measureText Метод
Элемент холста HTML имеет метод measureText, который позволяет нам измерять размер фрагмента текста.
Это означает, что мы можем поместить наш текст на холст, а затем вызвать его, чтобы измерить его размер.
Например, мы можем написать:
const text = 'hello world'
const font = "bold 12pt arial"
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const {
width
} = context.measureText(text);
console.log(width)
У нас есть переменные text и font с текстовым содержимым и стилями шрифта соответственно.
Затем мы создаем холст с createElement.
И мы вызываем getContext, чтобы получить контекст.
Затем мы устанавливаем свойство font со стилями шрифта.
Затем мы вызываем measureText с переменной text, чтобы измерить размер text.
Мы получаем свойство width из возвращенного объекта.
И мы должны увидеть число вроде 84.4453125, зарегистрированное в журнале консоли.
Число также в пикселях.
Заключение
Мы можем измерить размер текста с помощью свойств clientHeight и clientWidth элемента.
Кроме того, мы можем поместить наш текст на холст и использовать метод measureText для измерения ширины текста.
