Меняем величину (размер) шрифта с javascript

Некоторое время назад мне стало интересно, каким образом на некоторых сайтах сделана очень полезная по моему мнению "штука" предоставляющая возможность пользователю ( посетителю сайта ) менять размер шрифта на более подходящий ему.

Вот собственно я хочу поделиться вариантом реализации данной так сказать "фичи".

Шаг 1:
Вставляем в документ следующий скрипт:

<script type="text/javascript" language="javascript">
var min=8;
var max=16;
function increaseFontSize() {
   var p = document.getElementsByTagName('div');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('div');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}
</script>

Данный скрипт имеет две переменные MIN и MAX которые соответственно отвечают за минимальный и максимальный размер шрифта. Их вы можете варьировать по своему усмотрению.

Шаг 2:
Теперь делаем вывод нашего блока с регулировкой размера шрифта следующим образом:

<a href="javascript:increaseFontSize();" title="increase">+</a> | <a href="javascript:decreaseFontSize();" title="decrease">-</a>

Данный пример будет менять текст от 8 до 16 пунктов в каждом
<div>'е на вашей странице.

Andrei - 10-04-11 06:04:29

Как сделать чтобы он работал только для блока content ?
div id="content"

Demetr - 9-07-10 09:07:56

И в чем собственно интерес, тупо менять размера шрифта, без сохранения его на остальных страницах?

Vlad - 1-06-10 07:06:49

Здравствуйте.
Красивая и нужная вещь.
Спасмбо. С увожением. Самойлов. г. Томск.

Avis - 6-04-10 12:04:40

Скрипт можно будет применить скажем для увеличения шрифта в объявлениях Google Adsense ?

Рома - 22-12-09 12:12:24

Если вам нужно меня шрифт, просто поменяйте в скрипте "div" на "p"(в данном случае в тексте ,думаю, каждый использует .Пробывал, работает

vistor - 8-07-08 23:07:12

Скрипт супер. Но там написано что работает только с . Так что если у вас не дивами верстано, не судьба...

Cth - 9-06-08 20:06:49

А кто видел пример варианта скрипта, который запоминает выбранный размер шрифта пользователем. То есть интересна работа, через кукисы... ну и кнопку, обнуления, на дефольтный скрипт.

Тарас - 18-04-08 17:04:54

Александр, текст меняется в 'ах ... :-) все работает, проверено :-)

Александр - 18-04-08 16:04:34

Попробовал, что то не работает шрифт вообще не увеличивается на странице

Тарас - 27-03-08 12:03:14

Спасибо, приятно что вы нашли на страницах сайта для себя полезное … сапа :- ) зло… НО …

Стас - 26-03-08 17:03:52

размер шрифта с javascript... Спасибо, нашел то что искал, хоть бы рекламу повесил, я бы кликнул :), а сапа зло

ВНИМАНИЕ: Все поля необходимо заполнить

Написать комментарий