Программирование динамической установки большого числа свойств
Style может оказаться утомительным процессом, сопряженным с появлением ошибок. Лучшим вариантом является привязка свойств CSS к классу с последующей динамической заменой классов объекта.
В следующем примере демонстрируется применений указанной техники, когда значение атрибута
class дескриптора
<div>, на который помещается указатель мыши пользователя, вызывает изменение представлении держимого целевого региона:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns=Mhttp://www.w3.org/1999/xhtml">
<head>
<title>Изменение классов</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<style type="text/css">
#mirror {border-style: solid; border-width: lpx; width: 100%;}
#theStyles {border-style: dashed; border-width: lpx; width: 80%; pad-5%;}
h1 {text-align: center;}
/* классы на выбор */
.big {font-size: 48pt;}
.small {font-size: 8pt;}
.important {text-decoration: underline; font-weight: bold;}
.annoying {background-color: yellow; color: red;}
</style>
<script type="text/javascript">
<!--
function changeClass(whichClass)
{
document.getElementById("mirror").className = whichClass;
}
//-->
</script>
</head>
<body>
<h1>Результат</h1>
<div id="mirror">Укажите мышью любой размещенный ниже текст, и его CSS-свойства отразятся на представлении данного текста.</div>
<br /><br />
<h1>Образцы стилей для тестирования</h1>
<div id="theStyles">
<div onmouseover="changeClass(this.className)">
Очень большой текст.
</div>
<hr />
<div onmouseover="changeClass(this.className)">
Текст небольшого размера.
</div>
<hr />
<div onmouseover="changeClass(this.className)">
Очень важный текст.
</div>
<hr />
<div onmouseover="changeClass(this.className)">
Текст раздражающего вида.
</div>
</div>
</body>
</html>
О6ратите внимание на то, что в данном примере для получения доступа к атрибуту class (X)HTML используется
className. Причина в том, что "class" является зарезервированным словом в JavaScript, поэтому мы должны избегать его использования в качестве идентификатора.