Colour bands

by tonytlwu

HTML

<div class="band" data-color="red">Text</div>
<div class="band" data-color="blue">Text</div>
<div class="band" data-color="yellow">Text</div>

CSS

div {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

JavaScript

$('.band').each(function(){
    var colors = {
        "red" : {
            "backgroundColor" : "#993333",
            "color" : "#ffffff"
        },
        "blue" : {
            "backgroundColor" : "#333399",
            "color" : "#ffffff"
        },
        "yellow" : {
            "backgroundColor" : "#ffff00",
            "color" : "#333333"
        }
    };
    
    var colorKey = $(this).data('color');
    $(this).css(colors[colorKey]);
});