Управление стилями
|
Автор: Артемьев Сергей Игоревич ICQ: 438856621 email: _spin_@bk.ru |
Язык JavaScript предоставляет средства для управления стилями элементов "на лету". Под стилем в данном случае понимается набор параметров элемента, определяющий его внешний вид и особенности поведения на странице.
Возможно два способа управления стилем - непосредственное программное изменение элементов стиля и переопределение стиля с использованием классов CSS.
Рассмотрим первый способ. Мы уже применяли его, когда рассматривали возможности перехвата событий клавиатуры. Смысл данного метода состоит в том, что необходимый внешний вид и поведение элемента достигается последовательным изменением свойств его стиля. Например:
Этот скрипт по клику на странице меняет стиль документа, меняя шрифт с полужирного красного на обычный чёрный. Если немного изменить скрипт и добавить таймер, то получится вот такой мигающий текст:
Тестовая строка
А изменить скрипт надо так:
<script type="text/javascript" language="javascript">
function doMouseEvt()
{
var elm = document.getElementById("styler");
if(elm)
{
if(elm.style.fontWeight == "bold")
{
elm.style.fontWeight = "normal";
elm.style.color = "black";
}
else
{
elm.style.fontWeight = "bold";
elm.style.color = "red";
}
}
}
window.setInterval("doMouseEvt();", 1000);
</script>
... <span id="styler">Тестовая строка</span>
Второй способ заключается в том, что динамическм меняется не каждый элемент стиля в отдельности, а сразу устанавливается значение класса элемента. В свою очередь, стиль класса описывается отдельно в формате CSS.
Добавим в элемент head описание стилей необходимых классов и код скрипта:
<style type="text/css">
.gray_green{
font-size: 16px;
font-weight: bolder;
color: #C00;
background-color: #FFFF33;
border: 1px solid gray;
padding: 5px;
display:block;
width: 150px;
text-align:center;
}
.yellow_red{
font-size: 16px;
font-weight: normal;
color: #009900;
background-color:#CCCCCC;
border: 1px solid #009900;
padding: 5px;
display:block;
width: 150px;
text-align:center;
}
</style>
<script type="text/javascript" language="javascript">
function doBlinkClass()
{
var elm = document.getElementById("styler_class");
if(elm)
{
if(elm.className == "gray_green")
elm.className = "yellow_red";
else
elm.className = "gray_green";
}
}
window.setInterval("doBlinkClass();", 1000);
</script>
В элемент body добавим соответствующий тег с текстом:
<span class="gray_green" id="styler_class">Тестовая строка</span>
В результате получим следующее:
|
Тестовая строка
|
На первый взглад может показаться, что второй метод значительно более громоздкий и неудобный, но смею вас заверит - это не так. Плюсов такого подхода всего три, но они полностью компенсируют все минусы.
Во-первых, использование классов уменьшает объём кода JavaScript и повышает его читаемость. Кроме того, программисту достаточно лишь описать каркасы стилей, задумываясь в процессе разработки не о внешнем виде скрипта, а о его функциональности. Следствие всего этого - возрастает скорость и качество разработки скрипта, снижается количество ошибок и упрощается отладка.
Вторая причина несколько глобальнее. Так уж получается, специалист, совмещающий в себе таланты программиста и художника - нечастое явление. Как правило человек является специалистом и гуру в чём-то одном. Поэтому программирование сайтов и их дизайн делают чаще всего разные люди. "Классовый" подход к управлению стилями из JavaScript позволяет полностью разделить работу программиста и дизайнера. А кроме того - позволяет менять внешний вид скрипта по своему усмотрению не меняя код JavaScript, т.е. без повторного привлечения программиста.
Третья причина более всего важна для разработчиков. Разделив код и описание стилей, можно спокойно зашифровать или как-то ещё закрыть код, защищая тем самым свой труд от банального воровства и плагиата. Это особенно актуально, если вы распространяете свои скрипты за деньги.
Таким образом , совмещение JavaScript и CSS позволяет добиться впечатляющих визуальных эффектов. Один из хороших примеров аккуратно и качественно написаного подукта - пакет highslide (http://highslide.com/). Этот пакет бесплатен для частного использования и распространяется с открытым исходным кодом, снабжен применами и комментариями.
