Селекторы ID


Параметр ID задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически.

Синтаксис ID селектора следующий.

#ID селектор { Параметр: Значение; }

Пример 1. Использование идентификатора ID
<style>
#help { position:absolute; left:160px; top:120px; width:225px; height:180px; z-index:1; }
</style>

<div ID=help>
<table width="100%" border="0" cellspacing="0" cellpadding="4" height="100%">
<tr>
<td bgcolor="#FFFFCC">Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.</td>
</tr>
</table>
</table>
</div>

В примере таблица помещена в слой с именем help. Использование идентификатора дает возможность изменять некоторые параметры таблицы, например, делать ее невидимой или видимой по желанию (пример 2).

Пример 2. Изменение видимости слоя
<html>
<head>
<script language="JavaScript">
function init() {
IE = (document.all)
NC = (document.layers)
Opera = (document.getElementById)
}

function hiddenLayer() {
init();
if(IE) eval(´document.all["descr"].style.visibility = "hidden"´)
if(NC) eval(´document.layers["descr"].visibility = "hidden"´)
if(Opera) eval(´document.getElementById("descr").style.visibility = "hidden"´)
}

function showLayer() {
init();
if(IE) eval(´document.all["descr"].style.visibility = "visible"´)
if(NC) eval(´document.layers["descr"].visibility = "visible"´)
if(Opera) eval(´document.getElementById("descr").style.visibility = "visible"´)
}
</script>
</head>

<body>
<table width=90% border=1 cellspacing=0 cellpadding=4 bordercolor=#666666 align=center>
<tr>
<td width=20% align=center><a href=# onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src="button.gif" width=98 height=33 border=0></a></td>
<td>
<div id=descr style="position: relative; visibility: hidden">Данная
эксклюзия является подмножеством астрациональных супремативных
монотенных федоний кадонарного экстрафазория.</div>
</td></tr></table>
</body>
</html>


Предыдущая статья     Следующая статья     Список статей