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

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

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

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

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.top</div>
</body>
</html>

2. Второй скрипт немного длине, но уменьшает и увеличивает текст до бесконечности, то есть, с каждым разом размеры меняются на 1 px.
Здесь менять ничего не надо, кроме самого текста, который нужно увеличить или уменьшить (строка № 7), ну и название кнопок (строка №8, №9,10):

<html>
<head>
<meta charset=utf-8 />
<title>Как изменить размер текста – JavaScript</title>
</head>
<body>
<p>bloggood.top</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.top
</div>
</body>
</html>

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