HTML TIPS & TRICKS 2000/09
DOMとスタイルシートを制する

QUESTION 1　文字を出現させろ！

　今回はすでにお馴染みのものですが、オブジェクトへのアクセスにDOMを使って、 NN6でも動くということが違います。 まずは文字の表示の非表示の切り替えです。リンクにカーソルを重ねると、リンクとは別の場所（今回はリンクのすぐ右横）に"Go!"と表示されます。

W3C(World Wide Web Consortium)

• HTML 4.01 SpecificationGo!
• HTML 3.2 Reference SpecificationGo!
• Cascading Style Sheets, level 1Go!
• Cascading Style Sheet, level 2 SpecificationGo!
• Document Object Model (DOM) Level 1 SpecificationGo!

　まずはDOMオブジェクトを取得しなければなりません。 まず目的のエレメントにIDをつけておきます。そして、JavaScriptでは次のようにします。

オブジェクトを格納する変数 = document.getElementById(目的のエレメントのID);

　次に、表示と非表示の切り替えです。これにはCSS2のvisibilityプロパティを使用しました。 displayプロパティなどでも代用できますが、これを選択した理由が特にあるわけではありません。 単に私にとって使いやすかったというだけです。
　表示の切り替えはこのプロパティの値をvisibleかhiddenに切り替えることで行いました。どちらに切りかえるかは、 関すの呼び出しのときに渡す第2引数によって判断しています。 なお、表示を切り替えるエレメントは予め非表示に設定しておきます。 これを忘れると、イベント発生前はすべて表示されているということになってしまいます。

　後は実際のものを見ていただいたほうがいいでしょう。

CSS定義の一部

/* 予め非表示にしておくエレメントのIDを列挙 */
#goHTML40, #goHTML32, #goCSS1, #goCSS2, #DOM1
{
    visibility:hidden;
    font-family:sans-serif;
    font-size:150%;
    font-wight:bolder;
    color:red;
}

JavaScript

function sAndH(id, stat)                    //イベントで呼び出される関数
{
    obj = document.getElementById(id);      //DOMオブジェクトを取得
    if(stat == "s")                         //表示するとき・・・
    {
        obj.style.visibility = "visible";   //visibilityプロパティをvisibleに
    }
    else if(stat == "h")                    //隠すとき・・・
    {
        obj.style.visibility = "hidden";    //visibilityプロパティをhiddenに
    }
}

HTMLの一部

<A href="http://www.w3.org/TR/html401/ onMouseOver="sAndH('goHTML401', 's');" onMouseOut="sAndH('goHTML401', 'h');">HTML 4.01 Specification</A>
<SPAN id="goHTML401">Go!</SPAN>

エレメント

　一般にはタグと呼ばれていますが、正しくはエレメント、または要素と言います。 エレメントとは、開始タグと終了タグに挟まれた部分のことです。
　詳しくは、HTMLの注意事項の解説を参照してください。

トップページ