jQuery Style manipulations

by bjelline

HTML

<button class="setcolor" data-color="#DDDD00">Yellow background</button>
<button class="setcolor" data-color="red">Red background</button>
<button id="btn-large">Large text</button>
<button id="btn-small">Small text</button>

<div id="text">
    So Long, and Thanks for All the Fish!
</div>

CSS

.large {
    font-size:24px;
}


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

JavaScript

$(".setcolor").click(setColorFromClickedButton);
$("#btn-large").click(function() { $("#text").addClass('large') });
$("#btn-small").click(function() { $("#text").removeClass('large') });

function setColorFromClickedButton() {
    let color = $(this).data('color');
    $("#text").css('background-color', color);
}