BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как изменить размер текста – JavaScript

Как изменить размер текста – JavaScript

2016-10-31 / Вр:10:04 / просмотров: 1479

Всем привет!
В этой статье я расскажу, как изменить размер текста на сайте.
Как это будет выглядеть? После установки кода на сайте появятся две кнопки, например, «Уменьшить» и «Увеличить». После нажатия на эти кнопки, текст уменьшится либо увеличится.
Полезная вещь на сайте для тех, у кого плохое зрение. Хотя, можно обойтись и без этого скрипта, так как сами браузеры способны маштабировать страницы.  Но, считаю своим долгом выложить на блоге скрипт, а вдруг кому-то пригодится.

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>

Каким кодом будете пользоваться вы – решать вам, и вообще, нужно ли это для вашего сайта?

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136