JavaScript - 動的なページの作成(css(display, visibility, opacity, font-size, color, line-height))

初めてのJavaScript 第2版
(オライリージャパン)
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

• OS X Mavericks - Apple(OS)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• JavaScript (プログラミング言語)
• jQuery (JavaScript Library)

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリージャパン、2009年、ISBN978-4-87311-425-5) の12章(動的なページの作成)、練習問第12-2.12-4.を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

練習問第12-2.12-4.

コード(BBEdit)

$('#d0').css({
    fontSize: '14pt',
    color: 'red',
    lineHeight: '16pt'
});

var visibility_b = $('#visibility_b'),
    visibility_d = $('#visibility_d'),
    display_b = $('#display_b'),
    display_d = $('#display_d'),
    opacity_b = $('#opacity_b'),
    opacity_d = $('#opacity_d');

visibility_b.click(function() {
    var val = visibility_d.css('visibility');
    if (val === 'hidden'){
        visibility_d.css('visibility', 'visible');
    } else {
        visibility_d.css('visibility', 'hidden');
    }
});

display_b.click(function() {
    var val = display_d.css('display');
    if (val === 'none'){
        display_d.css('display', 'block');
    } else {
        display_d.css('display', 'none');
    }
});

opacity_b.click(function() {
    var val = opacity_d.css('opacity');
    if (val === '0'){
        opacity_d.css('opacity', '1');
    } else {
        opacity_d.css('opacity', '0');
    }
});

フォントサイズ14pt、赤色,行の高さ16ptで表示するdivブロックの中のテキスト

visibility

display

opacity