| HTML要素の識別 |
tagName |
ID属性 |
class属性 |
name属性 |
| 上のタブをクリックすれば、その内容がここに表示されます。 |
| メッセージ表示 |
|
要素のtagNameプロパティでタグ名を取得し、識別する。
(例)
el = event.srcElement;
if(el.tagName == "H3"){
el.style.color = "red";
}
(注意)タグ名"H3”は大文字でないと認識されない。
要素のidプロパティでid属性名を取得し、識別する。
(例)
el = event.srcElement;
if("p1"==el.id)el.style.color = "blue";
(注意)id名には大小文字の区別あり。
要素のclassNameプロパティでclass名を取得し、識別する。
(例)
el = event.srcElement;
if("abc"==el.className){
el.style.fontSize="18pt";
}
(注意)class名には大小文字の区別あり。
要素のnameプロパティでname属性名を取得し、識別する。
(例)
el = event.srcElement;
if("abc"==el.name)el.style.colr = "red";
(注意)適用できるタグが限られ、ID属性ほど適用範囲は広くない。
Sample Source......................................................................>>>
<style TYPE="text/css"><!--
.style1 {border-left:2px solid white;
border-top:2px solid
white;
border-right:2px solid
black;
border-bottom:2px solid
black;}
.style2 {border:0px;}
--></style>
<script language="JavaScript"><!--
var oldel = null;
function TabOpen(c){
if(null != oldel){
oldel.className =
"style1"; //ｽﾀｲﾙを元に戻す
oldel.style.backgroundColor = "";
}
var el = event.srcElement;
//ｸﾘｯｸしたﾀﾌﾞを識別する
el.style.backgroundColor = c; //ﾀﾌﾞの色を設定
el.className = "style2";
//ｽﾀｲﾙを変更し、ﾀﾌﾞの枠線を消す
tab.style.backgroundColor = c; //ﾃﾞｰﾀ表示領域もﾀﾌﾞと同じ色に
oldel = el; //現在のﾀﾌﾞを記憶しておく
if(c == "linen")tab.innerHTML =
d1.innerHTML;
if(c == "lavender")tab.innerHTML = d2.innerHTML;
if(c == "mistyrose")tab.innerHTML = d3.innerHTML;
if(c == "lightcyan")tab.innerHTML = d4.innerHTML;
}
function Mover(obj,n){ //ﾏｳｽｵｰﾊﾞｰ時
obj.style.color = "red";
if(n == 1){
mes.innerText =
"要素のtagNameﾌﾟﾛﾊﾟﾃｨを利用";}
if(n == 2){
mes.innerHTML = "要素のidﾌﾟﾛﾊﾟﾃｨを利用";}
if(n == 3){
mes.innerHTML = "要素のclassNameﾌﾟﾛﾊﾟﾃｨを利用";}
if(n == 4){
mes.innerHTML = "要素のnameﾌﾟﾛﾊﾟﾃｨを利用";}
}
function Mout(obj){
//ﾏｳｽｱｳﾄしたら
obj.style.color = "";
}
//--></script>
</head>
<body>
<table border="3" bgcolor="#000000" cellspacing="0">
<tr><td>
<table style="background-color:silver;"
cellspacing="0"
cellpadding="3">
<tr>
<td colspan="4" align="center">HTML要素の識別</td>
</tr>
<tr>
<td id="td1" class="style1"
onmouseover="Mover(this,1);"
onmouseout="Mout(this);"
onclick="TabOpen('linen');">tagName</td>
<td id="td2" class="style1"
onmouseover="Mover(this,2);"
onmouseout="Mout(this);"
onclick="TabOpen('lavender');">ID属性</td>
<td id="td3" class="style1"
onmouseover="Mover(this,3);"
onmouseout="Mout(this);"
onclick="TabOpen('mistyrose');">class属性</td>
<td id="td4" class="style1"
onmouseover="Mover(this,4);"
onmouseout="Mout(this);"
onclick="TabOpen('lightcyan');">name属性</td>
</tr>
<tr>
<td id="tab" colspan="4" width="400"
height="200">
上のタブをｸﾘｯｸすれば、その内容がここに表示されます。</td>
</tr>
<tr>
<td id="mes" colspan="4">ﾒｯｾｰｼﾞ表示</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="d1" style="display:none">
･･･(省略)･･･
<div id="d4" style="display:none">