Crash Course On jQuery - Changing The CSS

Example of how to change an element's CSS in jQuery.

by Tony Le

HTML

<!-- WRAPPER -->
<div id="wrapper">
  <p>Here is some awesome plain example text!</p>
  <div class="clear"></div>
  <button type="button" id="left-btn">Float Left</button>
  <button type="button" id="right-btn">Float Right</button>
</div>
<!-- WRAPPER END -->

CSS

/* OUR INITIAL STYLE */

body {
  background-color: #fff;
  color: #000;
}

p {
  display: inline-block;
  padding: 20px;
  float: left;
}

.clear {
  clear: both;
}

JavaScript

// if the left button is clicked on
$('#left-btn').on('click', function(){
	// change the p tag's css to float left
  $('p').css('float', 'left');
});

// if the right button is clicked on
$('#right-btn').on('click', function(){
	// change the p tag's css to float right
  $('p').css('float', 'right');
});