Чтобы позволить пользователю менять размер шрифта на вашем сайте или в блоге, можно воспользоваться вот таким простым,учебным кодом.
Главное, что стоит учесть это то, что размеры шрифта на вашем сайте должны быть заданы в относительных величинах (em, % ).
Здесь все очень просто. Код понятен, но постараюсь дать комментарии в тексте.
Каждая ссылка нашего блока имеет уникальный
И так как функция присвоена переменной
Сама функция
Вы можете посмотреть файл на моем Google Grive
Или можете посмотреть его в работе на сайте Codepen
Эту фишку можно использовать и для блога, совместив ее с другими возможностями для пользователя. Например - Изменить цвет фона и текста по желанию посетителя сайта.
Или
Как сделать заглавной каждую букву в слове (JS)
Главное, что стоит учесть это то, что размеры шрифта на вашем сайте должны быть заданы в относительных величинах (em, % ).
Здесь все очень просто. Код понятен, но постараюсь дать комментарии в тексте.
Каждая ссылка нашего блока имеет уникальный
id, например - id="size-12". При клике на нее возниакет событие onclick, которое мы отслеживаем - document.getElementById('size-12').onclick = size12;И так как функция присвоена переменной
var size12 = makeSizer(12);, то мы запускаем функцию, передавая в нее уникальную переменную. В данном случае - 12.Сама функция
makeSizer(size) очень проста. Она возвратит document.body.style.fontSize = size + 'px';, в нашем случае - document.body.style.fontSize = '12px';, тем самым изменив размер шрифта всего документа. И коль скоро, у нас размеры заданы в относительных величинах, то пропорционально изменятся и заголовки документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
<a href="#" id="size-18">18</a>
<a href="#" id="size-20">20</a>
<a href="#" id="size-22">22</a>
<a href="#" id="size-24">24</a>
<a href="#" id="size-26">26</a>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iure aliquid perferendis assumenda necessitatibus dolorem aperiam inventore, est, consectetur ex? Quia, omnis illo dignissimos quas iusto cumque, culpa laboriosam laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio maxime consequatur necessitatibus, impedit sint repellendus esse? Architecto facere quibusdam nobis repellendus est a corrupti explicabo nemo. Nostrum architecto ullam maxime.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus velit eligendi quisquam harum ut perspiciatis illum quae vero, modi magni esse non vitae, quibusdam laudantium, a repellat adipisci sed </p>
</div>
<script>
window.onload=function (){
(function (){
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
};
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
var size18 = makeSizer(18);
var size20 = makeSizer(20);
var size22 = makeSizer(22);
var size24 = makeSizer(24);
var size26 = makeSizer(26);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
document.getElementById('size-18').onclick = size18;
document.getElementById('size-20').onclick = size20;
document.getElementById('size-22').onclick = size22;
document.getElementById('size-24').onclick = size24;
document.getElementById('size-26').onclick = size26;
})();
};
</script>
</body>
</html>
Вы можете посмотреть файл на моем Google Grive
Или можете посмотреть его в работе на сайте Codepen
See the Pen Изменение размера ШрифтаПользователемJS by YaroslavW (@YaroslavW) on CodePen.
Эту фишку можно использовать и для блога, совместив ее с другими возможностями для пользователя. Например - Изменить цвет фона и текста по желанию посетителя сайта.
Или
Как сделать заглавной каждую букву в слове (JS)
Комментариев нет:
Отправить комментарий