<script type="text/javascript">
var v=true;
var d=true;
/* visiblity 切替 */
function func_v(frm){
if(v){
v=false;
frm.elements["btn_v"].value="visibility:visible";
frm.elements["elm_v"].style.visibility="hidden";
}else{
v=true;
frm.elements["btn_v"].value="visibility:hidden";
frm.elements["elm_v"].style.visibility="visible";
}
}
/* display 切替 */
function func_d(frm){
if(d){
d=false;
frm.elements["btn_d"].value="display:inline";
frm.elements["elm_d"].style.display="none";
}else{
d=true;
frm.elements["btn_d"].value="display:none";
frm.elements["elm_d"].style.display="inline";
}
}
</script>
<form action="#">
<p>
visibility:none / visible を切替表示<br>
<input type="button" name="btn_v" value="visibility:hidden" onclick="func_v(this.form)" />
<input type="text" name="elm_v" value="要素" size="8" />
←要素の描画領域は確保される
</p>
<p>
display:none / inline を切替表示<br>
<input type="button" name="btn_d" value="display:none" onclick="func_d(this.form)" />
<input type="text" name="elm_d" value="要素" size="8" />
←要素の描画領域は確保されない
</p>
</form>