]]>
ваш баннер
]]>

Изменяем стили элементов web страницы с помощью JavaScript

31 октября, 2007

Современные JavaScript библиотеки позволяют кардинально изменять внешний вид страницы с помощью буквально нескольких строчек кода. В этой статье я покажу как с помощью библиотеки Prototype можно изменить стили практически любого набора элементов на html странице.

О библиотеках Prototype и Scriptaculous я уже писал в предыдущих статьях. Поэтому сейчас я не буду рассказывать о том, какая это хорошая библиотека :-) , а сразу перейду к примеру.

Допустим, у нас есть страница с текстом. Некоторые слова в этом тексте выделены с помощью тега <em> (или какого-нибудь другого, неважно). Напомню, что большинство браузеров выделяет текст, заключенный в этот тег, курсивом.

Мы же напишем функцию, которая будет выделять текст внутри всех тегов <em> жирным курсивом. Функция будет вызываться при нажатии на ссылку «Изменить стиль всех элементов <em>». Повторное нажатие на эту ссылку вернет текст в исходное состояние.

Итак, разметка нашей страницы:

Code (html4strict)
  2. <title>Масштабирование элементов (Script.aculo.us)</title>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  4. <script type="text/javascript" src="../lib/prototype.js"></script>
  5. <script type="text/javascript" src="testSS.js"></script>
  6. <link rel="stylesheet" type="text/css" href="styles_ss.css" />
  7. </head>
  8.  
  10. <p id="main">
  11. Привет. Эта страница содержит <em>несколько слов</em>, которые находятся внутри тегов <em> и </em>.
  12. Стиль отображения этих слов зависит от браузера (в большинстве случаев они выделяются <em>курсивом</em>).
  13. Ссылка внизу этой страницы позволяет изменить <em>стиль элементов</em>. Изменения заключаются в том, что все элементы будут выделены <em>жирным шрифтом</em>.
  14. </p>
  15. <p><a href="#" onclick="changeStyle()">Изменить стиль всех элементов <em></a></p>
  16.  
  17. </body>

В строках 4 и 5 мы подключаем библиотеку prototype и файл testSS.js, в котором находится наша функция.

В строке 15 создается ссылка, для которой событие onclick вызывает функцию changeStyle().

Чтобы придать странице более-менее симпатичный внешний вид, я использовал следующие стили:

Code (css)
  1. body {
  2.     width: 80%;
  3.     margin: auto;
  4. }
  5.  
  6. p {
  7.     font-size: 100%;
  8.     font-family: Verdana, sans-serif;
  9.     background-color: #eff5ff;
  10.     color: #484e58;
  11.     padding: 1em 1em 1em 1em;
  12. }

Теперь перейдем к изменению стилей элементов <em> страницы. Прежде всего, эти элементы нужно найти. Тут удобно использовать функцию $$(‘css_selector’). Она работает аналогично getElementsByTagName(), но запомнить ее название гораздо проще :-) . Эта функция находит все элементы, которые соответствуют заданному CSS селектору, и возвращает их в виде массива.

Например, $$("em") выберет все элементы <em> на странице, а $$(“#menu li”) – все элементы списков, расположенных внутри блока с id=”menu”.

Теперь у нас есть массив с нужными элементами, и мы можем менять их стили.

Прежде всего, определим новый стиль для элементов <em>:

Code (css)
  1. .bold {
  2.     font-weight: bold;
  3. }

В состав Prototype входят три функции для работы со стилями элементов:
1) addClassName("css_class_name") – устанавливает стиль;
2) removeClassName("css_class_name") – удаляет стиль;
3) hasClassName("css_class_name") – проверяет, установлен ли указанный стиль.

Теперь взгляните на функцию целиком:

Code (javascript)
  1. function changeStyle() {
  2.     var elements = $$("em");
  3.     elements.each(
  4.         function(el) {
  5.             if (el.hasClassName("bold")) {
  6.                 el.removeClassName("bold");
  7.             }
  8.             else {
  9.                 el.addClassName("bold");
  10.             }
  11.         }
  12.     );
  13. }

Как видите, всего тринадцать строк.
В строке 2 мы получили массив всех элементов <em> страницы. После этого, изменяем стили каждого элемента массива.

Тут необходимы некоторые пояснения. Дело в том, что тут для обработки массива использована функция each(…). В качестве параметра она принимает имя функции-обработчика и вызывает ее для каждого элемента массива. В данном случае, функция-обработчик объявлена прямо внутри функции each() (строки 4…11).

А дальше все просто. Мы проверяем, установлен ли стиль bold для текущего элемента, и если да, удаляем его, а если нет – добавляем.

Вот и все. Как видите, минимум кода и неплохой результат.

Если хотите, можете скачать файлы примера.

Понравилась статья? Подпишитесь на продолжение rss link !

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в CSS, HTML, JavaScript

]]>

Комментарии (4)

Вы можете отслеживать обсуждение записи с помощью RSS 2.0 rss link

Вы также можете оставить комментарий, или трекбек с Вашего сайта.

  1. Yuriy 01.11.2007 в 15:28 (Ответить)

    Еще для работы со стилями в prototype есть getStyle,setStyle, visible, hide, show, getHeight, getWidth. Может что еще забыл. Но их никак не три :)

  2. Владимир 01.11.2007 в 16:46 (Ответить)

    Согласен, не точно выразился. Три функции для установки удаления классов стилей.
    А еще можно изменять стили через свойство style объекта.
    Например, если добавить строку
    el.style.color="#f00";
    в приведенную функцию, текст в em’ах станет красным.

  3. tenshi 24.12.2007 в 13:35 (Ответить)

    почему бы просто не добавить в рантайме стиль

    em {
    font-weight: bold;
    font-style: normal;
    }

    ?

    или даже сразу прописать его отключённым и по клику - включать и выключать.

  4. Владимир 25.12.2007 в 17:23 (Ответить)

    Можно, конечно.
    Но я хотел показать именно добавление дополнительного класса со стилями.
    Хотя, код получается очень похожий.

Оставить комментарий

Введите ваш комментарий

* - обязательные для заполнения поля

Quicktags:

]]>