If you are looking for a way to interactively set CSS properties on a DOM element, you really need to look no further than jQuery. The .css() method makes it super simple to find and set CSS properties and combined with other methods like .animate(), you can make some cool effects on your site.
In its simplest form, the .css() method can set a single CSS property for a particular set of matched elements. You just pass the property and value as strings and the element?s CSS properties are changed.
$(‘.example’).css(‘background-color’, ‘red’);
This would set the ?background-color? property to ?red? for any element that had the class of ?example?.
But you aren?t limited to just changing one property at a time. Sure, you could add a bunch of identical jQuery objects, each changing just one property at a time, but this is making several, unnecessary calls to the DOM and is a lot of repeated code.
Instead, you can pass the .css() method a Javascript object that contains the properties and values as key/value pairs. This way, each property will then be set on the jQuery object all at once.
$(‘.example’).css({ ‘background-color’: ‘red’, ‘border’ : ‘1px solid red’, ‘color’ : ‘white’, ‘font-size’: ’32px’, ‘text-align’ : ‘center’, ‘display’ : ‘inline-block’});
This will change all of these CSS properties on the ?.example? elements. Here is a CodePen example:
I also took this a couple of steps further and combined this with the .animate() method which allows you to write custom animations on CSS properties.
I wrote this example site that combines these two methods and calls on them inside of a click event handler. When you click on one of the shapes, the ?current? shape changes to match it.
This is the part of the code that does the heavy lifting for the CSS:
$(‘.choice’).click(function() { $(‘#current’).animate({ ‘backgroundColor’ : $(this).css(‘background-color’), ‘height’ : $(this).css(‘height’), ‘width’ : $(this).css(‘width’), ‘border-radius’ : $(this).css(‘border-radius’), ‘border-left-width’ : $(this).css(‘border-left-width’), ‘border-right-width’ : $(this).css(‘border-right-width’), ‘border-bottom-width’ : $(this).css(‘border-bottom-width’), ‘border-left-style’ : $(this).css(‘border-left-style’), ‘border-right-style’ : $(this).css(‘border-right-style’), ‘border-bottom-style’ : $(this).css(‘border-bottom-style’), ‘border-left-color’ : $(this).css(‘border-left-color’), ‘border-right-color’ : $(this).css(‘border-right-color’), ‘border-bottom-color’ : $(this).css(‘border-bottom-color’) }, 2000)});
I had to add so many ?border? property changes since one of the shapes I chose to include was a triangle. A triangle is made in CSS by just showing one of the borders of the box-model and making two others transparent. You can see a great example of this on CSS-Tricks.
When the div with the ?choice? class is clicked, the CSS properties for the div with the ID of ?current? are changed. They are changed to match the CSS properties of the element that was clicked, which is why the .css() method is being called on the$(this) object. For example, the ?background-color? of the ?.choice? div will be changed to match the ?background-color? of the ?#current? div when that ?#current? div is clicked.
By just applying the .css() method in jQuery, you can easily list and change the CSS properties of any element or set of matched elements in the DOM. You can also then combine this method with others like event handlers and animations to create just about anything you can think of.
If you are interested, you can see all of the code for my example site here on GitHub. Thanks!
