新JavaScript入門 30 Dynamic Style(1)

新JavaScript入門 30

Dynamic Style(1)

Cascading Style Sheet(CSS)を用いるとフォントやレイアウトを自由に指定することができます。これをJavaScriptで操作することによってさまざまな効果を得ることができます。

■ スタイルシートの基礎

スタイルの指定方法は、直接タグに書きこむ方法とヘッダ部分に書いておく方法があります。直接書きこむには次のようにします。

    <SPAN STYLE="color:green">Green</SPAN>

こうすると、SPANタグに囲まれた文字が下のように緑色になります。

Green

同じスタイルを何度も使う場合は、ヘッダ部でスタイルを指定しておくと便利です。

<STYLE TYPE="text/css">
    PRE {letter-spacing:0;line-height:1em;}
    .key {letter-spacing:0;color:#8000FF;}
</STYLE>

こうしておくと、PREタグに囲まれた部分では字の間隔が 0 になり、段落の高さが字の高さと同じになります。
また、

    <SPAN CLASS=KEY>#8000FF</SPAN>

のようにタグのCLASSプロパティをKEYとしておくと、下のように字の間隔が 0 になり、#8000FFで指定される色になります。

#8000FF

実際のスタイルの属性は、

    property:value;

と指定しますが、細かい指定方法は、 CSS Attributesあたりをご覧ください。

■ スタイルの操作

これらのスタイルはJavaScriptで直接変更することができます。

最後の審判

var t = 0;
var strHex = "0123456789ABCDEF";    //10進→16進変換に利用

function test1() {
    var r, g, b;
    
    //色はmagenta、yellow、cyanの3点を頂点とする三角形上を動く
    t = t < 767 ? t + 1 : 0;
    if(t < 256) {
        r = 255; g = t; b = 255 - t;
    }
    else if(t < 512) {
        r = 511 - t; g = 255; b = t - 256;
    }
    else {
        r = t - 512; g = 767 - t; b = 255;
    }
    //span1の色を16進数で指定する
    span1.style.color = "#" + IntToHex((r<<16)+(g<<8)+b, 6);
    setTimeout("test1()", 20);
}

//整数nをm桁の16進数を表す文字列に変換
function IntToHex(n, m) {
    var str = "";
    var tmp;
    
    for( ; m > 0; m--) {
        tmp = n;
        n = Math.floor(n / 16);
        str = strHex.charAt(tmp - n * 16) + str;
    }
    return str;
}

window.onload = test1;

スタイルは、

    object.style.property = value

として変えることができます。このpropertyは、上の CSS Attributesとは微妙に違うので注意してください（colorが共通なのはたまたまです）。例えば、

    font-family → fontFamily
    margin-left → marginLeft

といった具合です。
各々のAttributeのページからpropaertyのページに飛べるので、そこを参照してください。

first, back, next, exit Written 5/23/98