HTMLのオブジェクトを表示したり隠したり使用可能にしたり使用不可にしたりする方法。
例えばボタンを使用不可にすると、グレーアウトされてクリックできなくなる。
タグの属性のdisabledを付けるか否かにより、使用可能/不可(有効/無効)を制御できる。[/2011-12-09]
(enabledじゃなくて、disabledね)
<タグ disabled>〜</タグ> …使用不可 <タグ>〜</タグ> …使用可
disabled属性にどんな値を与えても、使用不可となる(使用可能には出来ない)。[2011-12-09]
<タグ disabled="disabled">〜</タグ> <タグ disabled="true">〜</タグ> <タグ disabled="false">〜</タグ> <タグ disabled="">〜</タグ>
(XHTMLでは属性値(厳密には属性名)を省略できない為、「disabled="disabled"
」と書くのが正しいらしい)
JavaScriptでは、取得したタグオブジェクトに対し、以下のように値を取得・変更できる。
//使用可否を入れ替える1 if (obj.disabled) { obj.disabled = false; } else { obj.disabled = true; }
//使用可否を入れ替える2 obj.disabled = !obj.disabled;
タグオブジェクト自体を表示したり非表示(隠す)にしたりすることが出来る。
これには、CSS(スタイルシート)の属性を使用する。
関連するスタイルにはvisibilityとdisplayがある。
<タグ style="visibility:hidden">〜</タグ> …非表示 <タグ style="visibility:visible">〜</タグ> …表示 <タグ style="visibility:">〜</タグ> …表示
<タグ style="display:none">〜</タグ> …非表示 <タグ style="display:">〜</タグ> …表示
visibilityをhiddenにすると、そのタグは非表示になる。ただしそのタグがあったスペースはそのまま残る。(レイアウトは変わらない)
displayをnoneにすると、そのタグ自体の存在が消えたようになる(そのタグがあったスペースは縮まって無くなる)。(レイアウトが変わる)
displayには、none以外にblockやinlineなど、色々な値が指定できる。
blockを指定すると、ブロック要素になる。pタグとかh1タグとかがブロック要素。概ね、タグの前後に改行が入るようなもの。
inlineを指定すると、インライン要素になる。aタグとかspanタグとかがインライン要素。
つまりタグの種類によってブロック要素なのかインライン要素なのかは異なるので、表示する場合に一概に「blockを入れればいい」とは言えない。表示したい場合は素直に空文字列をセットするのがいいのではないかと思う。
JavaScriptでは、取得したタグオブジェクトに対し、以下のように値を取得・変更できる。
//visibilityの表示有無を入れ替える if (obj.style.visibility == "hidden") { obj.style.visibility = "visible"; } else { obj.style.visibility = "hidden"; }
//displayの表示有無を入れ替える if (obj.style.display == "none") { obj.style.display = ""; } else { obj.style.display = "none"; }