Задать вопрос
@ImagineTables
javascript

Как отследить событие изменения размера шрифта в браузере?

Когда юзер в настройках меняет средний шрифт на маленький или большой, меняется число пикселей в `1rem`. Как отследить это событие?

Попался вот такой совет:

const observer = new MutationObserver(([mutation]) =>
{
        // 1
        if (mutation.type === 'attributes' && mutation.attributeName === 'style')
        {
            // 2
        }
});

observer.observe(document.documentElement);


Но он нихрена не работает. Во-первых, согласно документации же, `observer.observe()` нельзя вызывать, не указав, что именно надо отслеживать. Т.е. код явно писался без проверки. А если добавить

observer.observe(document.documentElement, {attributes: true} );


(мы же проверяем мутацию атрибутов), то не только в `// 2`, но даже в `// 1` мы не приходим при смене шрифта.

Логику такого ответа я примерно понимаю. Мы же получаем число пикселей в `1rem` вот так:

parseFloat(getComputedStyle(document.documentElement).fontSize)


И значит, он, по идее, должен (?) мутировать. Но по факту этого не происходит.
  • Вопрос задан
  • 139 просмотров
13 комментариев
Подписаться 1 Средний 13 комментариев
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию + ИИ
    6 месяцев
    Далее
Решения вопроса 1
@Denis-WebDeveloper
Здравствуйте, извиняюсь за поздний ответ.
Мы можем отследить момент, когда пользователь меняет
размер шрифта в настройках своего браузера с помощью
события transitionend повешеного на document и проверки
на то что мы следим только за свойством font-size и то
что событие сработало только на теге html.
document.addEventListener('transitionend', function (event) {
  if (event.propertyName === "font-size" && event.target === document.documentElement ) {
    console.log(convertRemToPixels(1));
    console.log(event.propertyName);
    console.log(event.target);
  }
});

function convertRemToPixels(rem) {    
  return rem * parseInt(getComputedStyle(document.documentElement).fontSize);
}


При изменении настроек браузера сработает событие transitionend
на теге html, но только при условии, что у тега html есть css
свойство transition на font-size:
html {
	transition: font-size 0.001s ease 0s;
}


И естественно не должно быть фиксированного значения свойства font-size у тега html!
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы