Изменение размера шрифта (FontSize) на JavaScript
На некоторых веб-сайтах вы замечали три маленькие кнопки в правом верхнем углу страницы, выглядящие примерно так: -A A A+ . Эти кнопки обычно позволяют пользователям веб-сайта изменять размер шрифта всей страницы или определенной части страницы до необходимого размера, чтобы улучшить читаемость.
В этом посте мы предложим один из способов, как реализовать эту функцию для определенного div с помощью JavaScript, HTML и CSS также учавствуют.
Изменение размера шрифта при помощи HTML CSS и JavaScript
Размер текста по умолчанию должен быть установлен с помощью внутренней таблицы стилей CSS в заголовке вашей страницы. В данном случае: размер шрифта: 0.875 rem (он же 14 px).
Разрешить пользователям изменять размер текста на странице с помощью кнопок управления. В этом случае пользователи могут уменьшить текст, увеличить текст или сбросить его до нормального состояния.
единица/unit
| Абсолютная единица | Описание | Пример |
|---|---|---|
| px | 1/96 of 1 inch (96px = 1 inch) | font-size: 12px; |
| pt | 1/72 of 1 inch (72pt = 1 inch) | font-size: 12pt; |
| pc | 12pt = 1pc | font-size: 1.2pc; |
| cm | centimeter | font-size: 0.6cm; |
| mm | millimeter (10 mm = 1 cm) | font-size: 4mm; |
| in | inches | font-size: 0.2in; |
| Относительная единица | Описание |
|---|---|
| % | Относительно значения родительского элемента для этого свойства |
| em | Относительно текущего размера шрифта элемента |
| rem | Относительно размера шрифта root (например,<html> element). “rem” = “root em” |
| ch | Количество символов (1 символ равен ширине текущего шрифта 0/zero) |
| vh | Относительно высоты области просмотра (размер окна или приложения). 1vh = 1/100 высоты окна просмотра |
| vw | Относительно ширины области просмотра. 1vw = 1/100 ширины области просмотра. |
| vmin | Относительно меньшего размера области просмотра (например, для портретной ориентации ширина меньше высоты, поэтому она относится к ширине). 1vmin = 1/100 меньшего размера области просмотра. |
| vmax | Относительно большего размера окна просмотра (например, высота для портретной ориентации). 1vmax = 1/100 большего размера области просмотра. |
| ex | Относительно высоты нижнего регистра текущего шрифта“x”. |
HTML
Разметка кнопок изменения размера
<div class="testBlock">
<button id="decreaseFontTest">Меньше (-A)</button> <button id="default">По умолчанию (A)</button> <button id="increaseFontTest">Больше (A+)</button>
</div>
CSS
Оформление кнопок, стили корректируем под себя
<style>
.testBlock{margin:0 auto;padding:.2rem;max-width:96%;text-align:center; display:block}
.testBlock button{border-radius:.5rem;background-color:rgba(19,102,119,0.83);border:.1rem solid #8f8073}
</style>
JavaScript
Основная настройка ⇾ id или class блока для изменения, в данном случае ⇾ .contentPTtest. ID кнопок: decreaseFontTest (-), increaseFontTest (+), default (=). Используются еденицы измерения ⇾ px.
<script>
var bodyTest = document.querySelectorAll('.contentPTtest')[0];
var decFntTest = document.getElementById('decreaseFontTest');
var incFntTest = document.getElementById('increaseFontTest');
var defFontTest = bodyTest.style.fontSize;
var setDefFntTest = document.getElementById('default');
var getFontSize = function (b) {
return parseFloat(getComputedStyle(b, null).fontSize);
};
decFntTest.addEventListener('click', function(){
bodyTest.style.fontSize = getFontSize(bodyTest) - 1 + 'px'; // еденицы измерения (px)
}, false);
incFntTest.addEventListener('click', function(){
bodyTest.style.fontSize = getFontSize(bodyTest) + 1 + 'px';
}, false);
setDefFntTest.addEventListener('click', function(){
bodyTest.style.fontSize = defFontTest;
}, false);
</script>
Комментарии