Как изменить размера шрифта на сайте с помощью java-скрипта?

font-size-comparisonПосмотреть, как работает этот пример, вы можете у нас на сайте или на форуме. Сверху, справа, у нах находятся три кнопки: «А+», «А-» и «Сброс». Нажимая на них, вы можете изменять размер текста на сайте без перезагрузки страницы. Итак, что необходимо сделать, чтобы это заработало и на вашем сайте:

1. Сохраняем в папке шаблона java-скрипт из архива.

2. Открываем файл шаблона index.php и перед тегом </head> вставляем код

&lt;script type=<span style="color: #ff0000;">"text/javascript"</span> language=<span style="color: #ff0000;">"javascript"</span>
src=<span style="color: #ff0000;">"&lt;?php echo $mosConfig_live_site;?&gt;/templates/&lt;?php echo $cur_template; ?&gt;/md_stylechanger.js"</span>&gt;
<span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span>

(пишется одной строкой!!!)

Вместо <?php echo $cur_template; ?> можно просто вписать название шаблона.
3. Определяем в шаблоне место для кнопок (или простого текста) и вставляем туда

Если будут использоваться кнопки изменения размера

&lt;a href=<span style="color: #ff0000;">"index.php"</span> title=<span style="color: #ff0000;">"Large"</span> onclick=<span style="color: #ff0000;">"changeFontSize(1);return false;"</span>&gt;
   &lt;img src=<span style="color: #ff0000;">"templates/&lt;?php echo $cur_template; ?&gt;/images/larger.png"</span> border=<span style="color: #ff0000;">"0"</span> alt=<span style="color: #ff0000;">"больше"</span> /&gt;
&lt;/a&gt;
&lt;a href=<span style="color: #ff0000;">"index.php"</span> title=<span style="color: #ff0000;">"Small"</span> onclick=<span style="color: #ff0000;">"changeFontSize(-1);return false;"</span>&gt;
   &lt;img src=<span style="color: #ff0000;">"templates/&lt;?php echo $cur_template; ?&gt;/images/smaller.png"</span> border=<span style="color: #ff0000;">"0"</span> alt=<span style="color: #ff0000;">"меньше"</span> /&gt;
&lt;/a&gt;
&lt;a href=<span style="color: #ff0000;">"index.php"</span> title=<span style="color: #ff0000;">"Reset"</span> onclick=<span style="color: #ff0000;">"revertStyles(); return false;"</span>&gt;
  &lt;img src=<span style="color: #ff0000;">"templates/&lt;?php echo $cur_template; ?&gt;/images/reset.png"</span> border=<span style="color: #ff0000;">"0"</span> alt=<span style="color: #ff0000;">"сброс"</span> /&gt;
&lt;/a&gt;

Если будет использоваться простой текст

<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"index.php"</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">"Large"</span> <span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"changeFontSize(1);return false;"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>[A +]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"index.php"</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">"Small"</span> <span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"changeFontSize(-1);return false;"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>[A -]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"index.php"</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">"Reset"</span> <span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"revertStyles(); return false;"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>[Сброс]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span>

Сохраняем файл.
4. Открываем CSS-файл шаблона (например, template_css.css) и меняем единицы измерения шрифтов html-элементов (размер шрифтов которых должен меняться) на относительные, т.е. px и pt меняем на % или em.

Должно получиться примерно так:

p, div, td <span style="color: #66cc66;">{</span>
 <span style="color: #000000; font-weight: bold;">font-size</span>: <span style="color: #933;">0</span><span style="color: #6666ff;"><span style="color: #933;">.9em</span></span>
<span style="color: #66cc66;">}</span>

Сохраняем, обновляем страницу сайта и испытываем.

<strong>Примечание:</strong> Если не работает изменение размера шрифта, а происходит обновление страницы или переход по ссылке после нажатия на кнопку изменения размера, то это значит, что JavaScript не работает (не грузится) и необходимо проверить правильность написания пути к нему.


  • Кстати использовать em нежелательно, так как возникают конфликты с IE.

Запись навигация

Top