jQuery Style manipulations

HTML

<button id="btn-yellow">Sarı zemin</button>
<button id="btn-red">Kırmızı Zemin</button>
<button id="btn-large">Büyük yazı</button>
<button id="btn-small">Küçük yazı</button>

<div id="text">
    İşte bu yazının stili değiştirilebilir. Yaşasın ! 
</div>

CSS

.large {
    font-size:24px;
}


#text {
    padding:20px;
    border:1px solid #DDDDDD;
}

JavaScript

$("#btn-yellow").click(yellowBg);
$("#btn-red").click(redBg);
$("#btn-large").click(largeText);
$("#btn-small").click(smallText);

function yellowBg() {
    $("#text").css('background-color','#DDDD00');
}

function redBg() {
    $("#text").css('background-color','#FF0000');
}

function largeText() {
    $("#text").addClass('large');
}

function smallText() {
    $("#text").removeClass('large');
}