Портфолио Тараса - создание сайтов визиток в Харькове

Меняем величину (размер) шрифта с 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>'е на вашей странице.

Комментарии (89) | Опубликовано: 19-02-08 12:02:56

Мебельные ткани

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

Ссылки внутри большой “кликабельной” области

Компрессия CSS таблиц средствами PHP

Обновляем дату на копирайте автоматически