DOMを使用して、スタイルを動的に変更する

HTMLの見た目をよくするためにスタイルシートを使用することが普通です。綺麗なウェブページのレイアウトには、スタイルシートが利用されています。DOMを使用すると、スタイルシートのプロパティを操作できます。フォントの大きさや、背景色を変更することができます。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>簡単なおみくじを作ってみる</title>
   
    <style>
    body{text-align:center;}
    #result{background-color:yellow;}
    </style>
    
<script>
    var kuji = new Array(4);
    kuji[0] = "<h1>大吉</h1>";
    kuji[1] = "<h2>中吉</h2>";
    kuji[2] = "<h3>小吉</h3>";
    kuji[3] = "<h4>凶</h4>";
function uranau(){
    
    /*
        IDが「result」のノードを取得して
        変数resultに格納する
    */
    var result = 
        document.getElementById("result");
    /*
        ０から(要素数－１)までの整数をランダムに生成して
        変数numに格納する　配列kujiの添え字として使用する
    */
    var num = 
        Math.floor( Math.random() * kuji.length );
    /*
        innerHTMLプロパティに配列kujiの要素を代入して
        表示されるメッセージを更新する
    */
    result.innerHTML = kuji[num];
    
    result.style.textAlign = "left";
    result.style.backgroundImage ="url(img/1.jpg)";
}

    /*
    現在の表示・非表示の管理する変数visibleを用意し、
    表示状態であることを示す trueを代入する。    
    */
    var visible = true;
function showHide(){

    /*
        表示エリアのノードを取得して、変数resultに代入する
    */
    var result = document.getElementById("result");
    /*
        ボタンのノードを変数btnに代入する
    */
    var btn    = document.getElementById("showBtn");
    
    /*
        変数visibleの状態により、表示・非表示を切り替えを行う
    */
    if( visible ){

        /*
            上記if文でtrueと判定された場合
            visibilityプロパティに「hidden」を
            代入して非表示にしています。
        */
        result.style.visibility = "hidden";

        /*
            ノードのvalueプロパティは、ボタンのラベルとして
            表示するテキストです。「表示」という文字にする
        */
        btn.value = "表示";
    }else{
        result.style.visibility = "visible";
        btn.value = "非表示";        
    }
    
    /*
        「!」は否定を表す演算子です。
        この演算子式により、visibleの値が
        「true」なら「false」、
        「false」なら「true」に
        切り替わります。
    */
    visible = !visible;
}    
</script>
    
</head>
<body>
<h1>あなたの今の運勢</h1>
    <form><p>
        <input type="button" value="おみくじ開始"
               onclick="uranau();">
        <input type="button" id="showBtn" value="非表示" 
               onclick="showHide();">
    </p></form>
    <div id="result">
        <h1>結果は・・・</h1>
    </div>
</body>
</html>

100

101

102

103

104

<!doctype html>

<html>

<head>

<title>簡単なおみくじを作ってみる</title>

<style>

body{text-align:center;}

#result{background-color:yellow;}

</style>

var kuji = new Array(4);

kuji[0] = "<h1>大吉</h1>";

kuji[1] = "<h2>中吉</h2>";

kuji[2] = "<h3>小吉</h3>";

kuji[3] = "<h4>凶</h4>";

function uranau(){

IDが「result」のノードを取得して

変数resultに格納する

var result =

document.getElementById("result");

０から(要素数－１)までの整数をランダムに生成して

変数numに格納する　配列kujiの添え字として使用する

var num =

Math.floor( Math.random() * kuji.length );

innerHTMLプロパティに配列kujiの要素を代入して

表示されるメッセージを更新する

result.innerHTML = kuji[num];

result.style.textAlign = "left";

result.style.backgroundImage ="url(img/1.jpg)";

}

現在の表示・非表示の管理する変数visibleを用意し、

表示状態であることを示す trueを代入する。

var visible = true;

function showHide(){

表示エリアのノードを取得して、変数resultに代入する

var result = document.getElementById("result");

ボタンのノードを変数btnに代入する

var btn = document.getElementById("showBtn");

変数visibleの状態により、表示・非表示を切り替えを行う

if( visible ){

上記if文でtrueと判定された場合

visibilityプロパティに「hidden」を

代入して非表示にしています。

result.style.visibility = "hidden";

ノードのvalueプロパティは、ボタンのラベルとして

表示するテキストです。「表示」という文字にする

btn.value = "表示";

}else{

result.style.visibility = "visible";

btn.value = "非表示";

}

「!」は否定を表す演算子です。

この演算子式により、visibleの値が

「true」なら「false」、

「false」なら「true」に

切り替わります。

visible = !visible;

}

</script>

</head>

<body>

<h1>あなたの今の運勢</h1>

<input type="button" value="おみくじ開始"

onclick="uranau();">

<input type="button" id="showBtn" value="非表示"

onclick="showHide();">

</p></form>

</div>

</body>

</html>

styleプロパティ

DOMでは、スタイルシートのプロパティは、各ノードのstyleプロパティの下に個別に格納されています。サンプルプログラムのようにIDが「result」のdiv要素のノードを取得します。

    var result = document.getElementById("result");

1	var result = document.getElementById("result");

textの配置を設定するtext-Alignプロパティを
「left」左寄せを設定するには下記ように書きます。

result.style.textAlign = "left";

1	result.style.textAlign = "left";

スタイルシートでは、テキストの配置をするプロパティ名は
「text-align」ですが、DOMでは「textAlign」でハイフン「-」がなく、
「alignの」の「a」が大文字になっています。

スタイルシートでは、要素の背景画像を
設定する場合は以下のように書きます。

　background-image:url(画像ファイルへのパス);

1	background-image:url(画像ファイルへのパス);

対して、DOMではbackgroundImageでハイフン「-」が
なく、「image」の「I」を大文字にします。

    result.style.backgroundImage ="url(img/1.jpg)";

1	result.style.backgroundImage ="url(img/1.jpg)";

visibilityプロパティ

スタイルシートvisibilityプロパティは、要素の表示・非表示を切り替えるプロパティです。
visibleは表示、hiddenは非表示です。

showHide関数

サンプルコードの42行目～85行目コメントアウトしましたのでそちらをご覧ください。

スタイルシートのプロパティ

DOMで設定可能な主なプロパティ。CSSを勉強したことがある人ならお馴染みなものばかりです。

backgroundColor	背景色
backgroundImage	背景画像
borderWidth	枠の太さ
borderColor	枠の色
color	文字の色
display	要素の表示・非表示(レイアウトが変更される)
visibility	要素の表示・非表示(レイアウトが変更されない)
fontFamily	フォント名
fontSize	フォントの大きさ
fontWeight	フォン路の太さ
width	コンテンツの幅
height	コンテンツの高さ
position	要素の配置方法
top	上端の座標
left	左端の座標
lineHeight	行の高さ
margin	コンテンツの外側に設ける余白
padding	コンテンツの内側に設ける余白
textAlign	テキストの配置