Всем привет!
В этой статье я расскажу, как изменить размер текста на сайте.
Как это будет выглядеть? После установки кода на сайте появятся две кнопки, например, «Уменьшить» и «Увеличить». После нажатия на эти кнопки, текст уменьшится либо увеличится.
Полезная вещь на сайте для тех, у кого плохое зрение. Хотя, можно обойтись и без этого скрипта, так как сами браузеры способны маштабировать страницы. Но, считаю своим долгом выложить на блоге скрипт, а вдруг кому-то пригодится.
1. Первый скрипт самый простой.
Он может увеличить текст на 60 px и уменьшить на 8 px.
Естественно, эти параметры можете менять на свое усмотрение, строка №13 – на уменьшение, строка №17 – на увеличение:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Как изменить размер текста – JavaScript</title> <style> .text { font-size:14px; } .text1 { font-size:8px; } .text2 { font-size:60px; } </style> </head> <body> <div onclick="document.getElementById('text').className = 'text2';">Жми сюда и текст увеличится</div> <div onclick="document.getElementById('text').className = 'text1';">Жми сюда и текст уменьшится</div> <div onclick="document.getElementById('text').className = 'text';">Текст по умолчании</div> <div id="text" class="text">BlogGood.RU</div> </body> </html>
2. Второй скрипт немного длине, но уменьшает и увеличивает текст до бесконечности, то есть, с каждым разом размеры меняются на 1 px.
Здесь менять ничего не надо, кроме самого текста, который нужно увеличить или уменьшить (строка № 7), ну и название кнопок (строка №8, №9,10):
<html> <head> <meta charset=utf-8 /> <title>Как изменить размер текста – JavaScript</title> </head> <body> <p>BlogGood.RU</p> <button id="decreaseFont">Меньше</button> <button id="increaseFont">Больше</button> <button id="default">По умолчанию</button> <script> var body = document.getElementsByTagName('body')[0]; var decFnt = document.getElementById('decreaseFont'); var incFnt = document.getElementById('increaseFont'); var defFont = body.style.fontSize; var setDefFnt = document.getElementById('default'); var getFontSize = function (b) { return parseFloat(getComputedStyle(b, null).fontSize); }; decFnt.addEventListener('click', function(){ body.style.fontSize = getFontSize(body) - 1; }, false); incFnt.addEventListener('click', function(){ body.style.fontSize = getFontSize(body) + 1; }, false); setDefFnt.addEventListener('click', function(){ body.style.fontSize = defFont; }, false); </script> </body> </html>
3. Вот еще один код, с помощью которого вы сможете уменьшать и увеличивать текст на сайте. Уменьшение или увеличение текста осуществляется простым кликом по кнопке на 5 px.
<html> <head> <meta charset=utf-8 /> <title>Как изменить размер текста – JavaScript</title> <script> function Font(element,step) { step = parseInt(step,10); var el = document.getElementById(element); var curFont = parseInt(el.style.fontSize,10); el.style.fontSize = (curFont+step) + 'px'; } </script> </head> <body> <a href="javascript:void(0);" onclick="Font('content',5);">Увеличить размер шрифта</a> | <a href="javascript:void(0);" onclick="Font('content',-5);">Уменьшить размер шрифта</a> <div id="content" style="font-size:14px;"> BlogGood.ru </div> </body> </html>
Каким кодом будете пользоваться вы – решать вам, и вообще, нужно ли это для вашего сайта?
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330348 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222536 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187748 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Добавить комментарий
Метки: javascript, Вебмастеру, для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐