Современные JavaScript библиотеки позволяют кардинально изменять внешний вид страницы с помощью буквально нескольких строчек кода. В этой статье я покажу как с помощью библиотеки Prototype можно изменить стили практически любого набора элементов на html странице.
О библиотеках Prototype и Scriptaculous я уже писал в предыдущих статьях. Поэтому сейчас я не буду рассказывать о том, какая это хорошая библиотека 🙂 , а сразу перейду к примеру.
Допустим, у нас есть страница с текстом. Некоторые слова в этом тексте выделены с помощью тега <em> (или какого-нибудь другого, неважно). Напомню, что большинство браузеров выделяет текст, заключенный в этот тег, курсивом.
Мы же напишем функцию, которая будет выделять текст внутри всех тегов <em> жирным курсивом. Функция будет вызываться при нажатии на ссылку «Изменить стиль всех элементов <em>». Повторное нажатие на эту ссылку вернет текст в исходное состояние.
Итак, разметка нашей страницы:
<head> <title>Масштабирование элементов (Script.aculo.us)</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="testSS.js"></script> <link rel="stylesheet" type="text/css" href="styles_ss.css" /> </head> <body> <p id="main"> Привет. Эта страница содержит <em>несколько слов</em>, которые находятся внутри тегов <em> и </em>. Стиль отображения этих слов зависит от браузера (в большинстве случаев они выделяются <em>курсивом</em>). Ссылка внизу этой страницы позволяет изменить <em>стиль элементов</em>. Изменения заключаются в том, что все элементы будут выделены <em>жирным шрифтом</em>. </p> <p><a href="#" onclick="changeStyle()">Изменить стиль всех элементов <em></a></p> </body>
В строках 4 и 5 мы подключаем библиотеку prototype и файл testSS.js, в котором находится наша функция.
В строке 15 создается ссылка, для которой событие onclick вызывает функцию changeStyle().
Чтобы придать странице более-менее симпатичный внешний вид, я использовал следующие стили:
body {
width: 80%;
margin: auto;
}
p {
font-size: 100%;
font-family: Verdana, sans-serif;
background-color: #eff5ff;
color: #484e58;
padding: 1em 1em 1em 1em;
}
Теперь перейдем к изменению стилей элементов <em> страницы. Прежде всего, эти элементы нужно найти. Тут удобно использовать функцию $$(‘css_selector’). Она работает аналогично getElementsByTagName(), но запомнить ее название гораздо проще 🙂 . Эта функция находит все элементы, которые соответствуют заданному CSS селектору, и возвращает их в виде массива.
Например, $$("em") выберет все элементы <em> на странице, а $$(“#menu li”) – все элементы списков, расположенных внутри блока с id=”menu”.
Теперь у нас есть массив с нужными элементами, и мы можем менять их стили.
Прежде всего, определим новый стиль для элементов <em>:
.bold {
font-weight: bold;
}
В состав Prototype входят три функции для работы со стилями элементов:
1) addClassName("css_class_name") – устанавливает стиль;
2) removeClassName("css_class_name") – удаляет стиль;
3) hasClassName("css_class_name") – проверяет, установлен ли указанный стиль.
Теперь взгляните на функцию целиком:
function changeStyle() {
var elements = $$("em");
elements.each(
function(el) {
if (el.hasClassName("bold")) {
el.removeClassName("bold");
}
else {
el.addClassName("bold");
}
}
);
}
Как видите, всего тринадцать строк.
В строке 2 мы получили массив всех элементов <em> страницы. После этого, изменяем стили каждого элемента массива.
Тут необходимы некоторые пояснения. Дело в том, что тут для обработки массива использована функция each(…). В качестве параметра она принимает имя функции-обработчика и вызывает ее для каждого элемента массива. В данном случае, функция-обработчик объявлена прямо внутри функции each() (строки 4…11).
А дальше все просто. Мы проверяем, установлен ли стиль bold для текущего элемента, и если да, удаляем его, а если нет – добавляем.
Вот и все. Как видите, минимум кода и неплохой результат.
Если хотите, можете скачать файлы примера.
Постовой
Нужно как-то выживать во время кризиса. Начните зарабатывать, посетив сайт www.eliteforex.ru
