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

Метод 1: использование переменных JavaScript и CSS

const rootFontSize = getComputedStyle(document.documentElement).getPropertyValue('font-size');
console.log(rootFontSize);

Этот метод получает вычисленное значение свойства CSS font-sizeкорневого элемента (html). Он использует функцию getComputedStyleдля доступа к вычисленному стилю элемента.

Метод 2: доступ к таблицам стилей документа

const styleSheets = document.styleSheets;
let rootFontSize;
for (let i = 0; i < styleSheets.length; i++) {
  const rules = styleSheets[i].cssRules || styleSheets[i].rules;

  for (let j = 0; j < rules.length; j++) {
    if (rules[j].selectorText === 'html') {
      rootFontSize = rules[j].style.fontSize;
      break;
    }
  }

  if (rootFontSize) break;
}
console.log(rootFontSize);

Этот метод перебирает коллекцию document.styleSheetsи находит правило, нацеленное на элемент html. Затем он извлекает из этого правила свойство fontSize.

Метод 3: анализ вычисленного стиля

const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
console.log(rootFontSize);

Этот метод использует getComputedStyleдля получения вычисленного стиля корневого элемента, а затем анализирует возвращенное значение для получения числового размера шрифта.

Метод 4. Прямой доступ к переменным CSS

const rootFontSize = getComputedStyle(document.documentElement).getPropertyValue('--root-font-size');
console.log(rootFontSize);

Если вы определяете переменную CSS для размера корневого шрифта, вы можете напрямую получить к ней доступ, используя getPropertyValueи передав имя переменной. Например, если вы установили --root-font-size: 16px;в своем CSS, этот метод вернет '16px'.

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