jQuery change CSS on click

Here we’ll show you how to change the CSS of an element using the jQuery click event. Lets start off with a simple HTML element using the button tag:

<button class="myElement">Hello</button>

You should end up with something like this:

Hello

Now lets say you wanted to change the background color once the button is clicked:

<script type="text/javascript">
$('.myElement').click(function() {
  $(this).css('background-color', '#ff0000');
});
</script>

We would then end up with something like this:

Hello

That’s it you can now make any CSS changes using the click() function, just make sure you have included jQuery on your page.