Показать сообщение отдельно
  #5 (permalink)  
Старый 17.04.2020, 12:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

увеличение размера шрифта для слабовидящих
Georgian,
заменить скрипт и атрибуты input(срока 63), установить максимальное увеличение строка 33.
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .wrapper-site h2{
  font-size: 22px;
  margin: 5px 0;
  padding: 5px 0;
}
.wrapper-site p{
  font-size: 14px;
  margin: 5px 0;
  padding: 5px 0;
}

.other h2{
  font-size: 22px;
  margin: 5px 0;
  padding: 5px 0;
}
.other p{
  font-size: 14px;
  margin: 5px 0;
  padding: 5px 0;
}
  </style>

  <script>
document.addEventListener("DOMContentLoaded", function() {
    var elem = document.getElementById('impaired');
    var max = 5; //максимальное увеличение в разы
    elem.setAttribute("max", max);
    var timer;

    function changefontSize() {
        var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
        while (treeWalker.nextNode()) {
            var el = treeWalker.currentNode;
            var parent = el.parentNode;
            var fontSize = parent.dataset.fontSize;
            if (!fontSize) {
                var computedStyle = getComputedStyle(parent)
                fontSize = computedStyle["font-size"];
                fontSize = parseInt(fontSize, 10);
                parent.dataset.fontSize = fontSize;
            }
            fontSize = Math.floor(fontSize * elem.value);
            fontSize = elem.value == 1 ?  `` : `${fontSize}px`;
            parent.style.fontSize = fontSize
        }
    }

    elem.addEventListener("input", function() {
        clearTimeout(timer);
        timer = setTimeout(changefontSize, 80);
    });
});
  </script>
</head>
<body>
<input id="impaired" type="range" step=".1" min="1"  value="1"><br><hr>

<div class="wrapper-site">
<h2>Георгий</h2>
<p>Анастасия</p>
<div class="other">
<h2>Мария</h2>
<p>Елена</p>
</div>
</div></body>
</html>

Последний раз редактировалось рони, 17.04.2020 в 12:27.
Ответить с цитированием