Сегодня, я предлагаю Вашему вниманию первый урок по чистому javascript. От предыдущих уроков его отличает то, что для создания функций и эффектов, нам не понадобятся специальные библиотеки.
В уроке, пойдёт речь об автоматическом изменении размера шрифта (текста) на сайте. Итак, приступим...
Сегодня, аудитории сайтов измеряются сотнями и тысячами человек. Разумеется не всем удобно работать с одним шаблоном оформления. Основное неудобство составляет слишком мелкий шрифт на сайте. Использование его по умолчанию обусловлено дизайнерским соответствием текста внешнему оформлению, но что делать людям со слабым зрением?... конечно менять шрифт на более крупный. Создание интерфейса способного делать это и будет целью этого несложного урока.
В этом уроке, нас не будет интересовать стилистическое оформление, только HTML и javascript (причем, писать все будем в html файл).
1. Создаём файл index.html в произвольной папке (можно пользоваться обычным блокнотом, но рекомендую использовать програму Notepad++);
2. Записываем стандартное начало xHTML файла:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
3. Теперь необходимо написать скрипт, который будет менять шрифт на сайте по желанию пользователя:
<script type="text/javascript">
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>
Разумеется, тут мы не указываем шаг изменения, сделаем это в следующем пункте.
4. Прописываем кнопки (в моем примере - ссылки), меняющие размер шрифта на определенное количество пунктов:
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="Font('content',5);">Увеличить размер шрифта</a> | <a href="javascript:void(0);" onclick="Font('content',-5);">Уменьшить
размер шрифта</a>
Размер в данном случае будет меняться сразу на 5 пунктов. Для более плавного изменения, можно поставить на 1.
6. Теперь необходимо создать контент, размер шрифта которого будем менять и задать начальный размер шрифта:
<div id="content" style="font-size:14px;">
CSS. Урок javascript. Изменение размера шрифта
</div>
</body>
</html>
Начальный размер, как видно из стиля: 14 пикселей.
Вот и всё. Если не допустили ошибок, то получите эффект, подобный тому, что в "Демо".
Совместимость: Internet Explorer 6 - 8; Mozilla Firefox 1.xx - 3.xx Opera 7.хх - 10.xx.
ДемоПо материалам сайта:
Российская школа CSS, автор статьи Григорий Загребельный
