Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » JavaScript » Урок JavaScript 1 - Изменение размера шрифта
Не нравится(-) 43 Нравится(+)
6-01-2010, 20:23 - GZ Design (JavaScript)
Урок JavaScript 1 - Изменение размера шрифта

Здравствуйте, Уважаемые посетители Российской школы CSS. Сегодня, я предлагаю Вашему вниманию первый урок по чистому 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" />
<title>Российская школа CSS. Урок javascript #1. Изменение размера шрифта</title>

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 #1. Изменение размера шрифта
</div>
</body>
</html>

Начальный размер, как видно из стиля: 14 пикселей.

Вот и всё. Если не допустили ошибок, то получите эффект, подобный тому, что в "Демо".
Спасибо за внимание!


Автор урока: Григорий Загребельный, Российская школа CSS
Совместимость: Internet Explorer 6 - 8; Mozilla Firefox 1.xx - 3.xx Opera 7.хх - 10.xx.


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 27211 раз(а) и написали 12 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

букмекерские ставки онлайн

«    Декабрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!