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

Владимир | | CSS, HTML, JavaScript.

Современные 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

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

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

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

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

  • tenshi

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

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

    ?

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

  • tenshi

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

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

    ?

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

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

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