Управление HTML DOM с ванильным JavaScript

Авторизоваться

Допустим, мы хотим масштабировать текст внутри заголовка:

<div id="headline">Hello World</div>

Прежде всего, нам нужно измерить ширину элемента с его текущим размером шрифта и содержанием текста. Для получения дополнительной информации вы можете взглянуть на этот пост.

const measureWidth = function(text, font) {
    // Measure the width of given text for given font
    ...
};

// Query the element
const ele = document.getElementById('headline');

// Get the styles
const styles = window.getComputedStyle(ele);

// Get the font size and font style
const font = styles.font;
const fontSize = parseInt(styles.fontSize);

const measured = measureWidth(ele.textContent, font);

Теперь мы можем вычислить, насколько масштабируется элемент, сравнивая измеренную ширину и полную ширину:

const scale = ele.clientWidth / parseFloat(measured);

Наконец, мы устанавливаем размер шрифта, когда элемент масштабируется до полной ширины:

const scaleFontSize = Math.floor(scale * fontSize);
ele.style.fontSize = `${scaleFontSize}px`;

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?