javascript - 複数の色でインジケータを作成する方法

Question

アプリケーションの状態に応じて色が変わる正方形のインジケーターを作成したいと思います。赤、緑、青、灰色の4色が欲しいです。Javascript/ExtJS/JQuery/HTML または gif 画像を使用してこれを達成するにはどうすればよいですか。

これらの技術でこれは可能ですか？

それとも他の方法でしょうか？

Answer 1

これは非常に基本的で簡単な作業です。まず、プログラムで変更できる特定の背景色を持つ正方形の DIV が必要です。

HTML

<div id="indicator"></div>

CSS

#indicator {
    position: relative; 
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid #dddddd;
}

JavaScript/jQuery

if(...some bad condition...)
    $('#indicator').css('background-color', 'red');

Answer 2

JQuery を使用した小さな例。「状態」が現在の状態を示す数値を保持しているとします。

<script type="text/javascript">
    $(document).ready(function() {
        // Select the div which will have the background color of the current state.
        var indicator = $('#state-div');
        switch(state) {
            case 0:
                indicator.css({'background-color': 'red'});
                break;
            case 1:
                indicator.css({'background-color': 'green'});
                break;
            // More cases for all the other states.
        }
    });
</script>

div の背景色を変更する代わりに、画像の src 属性または div の背景画像を変更することもできます。

SVG を使用して rect 要素の色を変更することもできます。SVG を効率的に操作するには、d3.js を検討してください。