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

Пример №11

На некоторых сайтах при очень мелком шрифте неудобно читать текст. Хотя и, современные браузеры способны масштабировать страницы. Это бывает не всегда удобно. В этом уроке Вы узнаете как добавить функцию увеличения и уменьшения текста на своём сайте при помощи скрипта javascript.

Пример работы скрипта, Вы сможите протестировать на этой странице.

Изменения настроек текста на Вашем сайте, добавит лишь ещё больше интерс к Вашему ресурсу.

В этой статье речь пойдёт как изменить размер текста на страницах сайта. Для кого то, эта функция окажется безполезной, а для кого-то очень нужной. Итак, как это будет выглядеть? После установки кода на сайте появятся две так называемые кнопки в виде текстовых строчек. Например, «Увеличить (+)» и «Уменьшить (-)». После нажатия на эти кнопки, текст уменьшится либо увеличится.

Пример №1:

Увеличить текст (+) Уменьшить текст(-)

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Пример кода JAVASCRIPT:

<script>
function changeFontSize(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>

Пример кода HTML:

<a href="javascript:void(0);" onclick="changeFontSize('content','2');">Увеличить текст (+)</a>
<a href="javascript:void(0);" onclick="changeFontSize('content',-2);">Уменьшить текст(-)</a>
 

Скопируйте код и вставьте его в нужной части страницы.

Пример №2:

Для тестирования примера №2 наведите курсор непосредственно на сам текст, и нажатием правой или левой кнопки мышки регулируйте масштабирование текста на своё усмотрение.

Пример кода JAVASCRIPT:

<script>function clickL(el){
var f=parseInt(el.style.fontSize);
f=f-2<7?7:f-2;
el.style.fontSize=f+'px';
 };
 
function clickR(el){
var f=parseInt(el.style.fontSize);
f=f+2<7?7:f+2;
el.style.fontSize=f+'px';
 };
 </script>

Пример кода HTML:

<div id="txt" oncontextmenu="clickR(this); return false;" onclick="clickL(this);" style="font-size:17px">
Наедь на меня, нажми на меня, ну не тормози...</div>
<style>
#txt {padding:3px 7px;}
#txt:hover {background:lavender;}
</style>
 

(!) Все файлы двух примеров масштабирования страницы, скопированы и находятся в zip архиве, который Вы можите скачать ниже.

Файл для скачивания в зип архиве:

       

Создано: 23.02.2023.|Обновлено: 24.02.2023.