Добавляем...


Динамическая установка стилей с помощью классов и коллекций
Методы работы со стилями, рассмотренные в предыдущем разделе позволяют работать только с одним дескриптором. В этом разделе мы рассмотрим более сложные возможности управления стилями. Сначала рассмотрим использование CSS-селекторов class. Пусть имеется следующая таблица стилей с двумя правилами класса:

<style type="text/css">
<! —
.вид1 {color: black; background-color: yellow; font-style: normal;}
.вид2 {background-color: orange; font-style: italic;}
—>
</style>

Тогда можно применить один из имеющихся классов к конкретному дескриптору <p> так:

<p id="myP1" class="вид1">Это проверка</p>

Теперь можно изменять представление этого абзаца, изменяя class элемента с помощью операторов JavaScript. Атрибут class элемента доступен с помощью свойства className:

theElement = document.getElementById("myP1");
theElement.className = "вид2";

В следующем примере демонстрируется простой эффект смены изображения, создаваемый с помощью указанной техники DOM:

<!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>
<title>Борьба Классов</title>
<meta http-equiv="content-type" content="text/html; " />
<style type="text/css">
<!--
body {background-color: white; color: black;}
.style1 {color: blue; font-weight: bold;}
.style2 {background-color: yellow; color: red;
text-decoration: underline;}
.style3 {color: red; font-size: 300%;}
-->
</style>
</head>
<body>
<p class="style1"
onmouseover="this.className='style2';" onmouseout="this.className = 'style1';">Укажите на меня</p>
<p>А почему не на
<span class="style2" onmouseover="this.className='style1';" onmouseout="this.className= 'style2';">меня</span>?</p>
<p> Но будте осторожны:<br>существенные изменения стиля могут
<span class="style1" onmouseover="this.className = 'style3';" onmouseout="this.className = 'style1';">сильно изменить представление документа</span>
</p>
</body>
</html>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика