■ここをｸﾘｯｸすれば、下のテキストが消え、ﾀﾞﾌﾞﾙｸﾘｯｸで復活する。
■displayﾌﾟﾛﾊﾟﾃｨとvisibilityﾌﾟﾛﾊﾟﾃｨとの相違
displayﾌﾟﾛﾊﾟﾃｨの内容を［表示する］
［非表示に］
visibilityﾌﾟﾛﾊﾟﾃｨの内容を［表示する］
［非表示に］
| displayﾌﾟﾛﾊﾟﾃｨ | visibilityﾌﾟﾛﾊﾟﾃｨ |
| この下にﾃｷｽﾄが表示されます。 displayﾌﾟﾛﾊﾟﾃｨとは 要素の表示状態を指定する。 非表示時には要素自体が無く なり、その領域は存在せず、 空白部分は残らない。 以上です |
この下にﾃｷｽﾄが表示されます。 visibilityﾌﾟﾛﾊﾟﾃｨとは 要素の表示状態を設定する。 非表示時にもその領域は確保され 空白部分が残る。 以上です |
<script language="JavaScript"><!--
function OnOff(n){
if(n==1){
sp1.style.display="";}
if(n==2){
sp1.style.display="none";}
if(n==3){
sp2.style.visibility="visible";}
if(n==4){
sp2.style.visibility="hidden";}
}
//--></script>
</head>
<body>
<p onclick="HD.style.display='none'"
ondblclick="HD.style.display=''">
ここをｸﾘｯｸすれば、下のテキストが消え、ﾀﾞﾌﾞﾙｸﾘｯｸで復活する。</p>
<h2 ID="HD">これがdisplay効果だ！</h2>
<p>■displayﾌﾟﾛﾊﾟﾃｨとvisibilityﾌﾟﾛﾊﾟﾃｨとの相違
<span onclick="OnOff(1);">［表示する］</span>
<span onclick="OnOff(2);">［非表示に］</span>
<span onclick="OnOff(3);">［表示する］</span>
<span onclick="OnOff(4);">［非表示に］</span>
</p>
<table border="1" cellpadding="2">
<tr>
<td>displayﾌﾟﾛﾊﾟﾃｨ</td>
<td>visibilityﾌﾟﾛﾊﾟﾃｨ</td>
</tr>
<tr>
<td>この下にﾃｷｽﾄが表示されます。<br>
<span id="sp1"
style="color:red;display:'none'">
displayﾌﾟﾛﾊﾟﾃｨとは<br>
要素の表示状態を指定する。<br>
非表示時には要素自体が無く<br>
なり、その領域は存在せず、<br>
空白部分は残らない。<br>
</span>以上です</td>
<td>この下にﾃｷｽﾄが表示されます。<br>
<span id="sp2"
style="color:red;visibility:'hidden'">
visibilityﾌﾟﾛﾊﾟﾃｨとは<br>
要素の表示状態を設定する。<br>
非表示時にもその領域は確保され<br>
空白部分が残る。<br>
</span>以上です</td>
</tr>
</table>
END