Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

jQuery makes working with CSS a breeze. The method here is .css(), and it is used very much like the other methods or actions in jQuery. While this entire tutorial will go against my conventional logic of only appending or removing classes, many of you will do it this way because it is much more simple. I must admit that it is a very quick and efficient way of applying CSS properties to an HTML element. Please just don't paint yourself in a corner using the css method after a selector more than a few times on a single element.

The jQuery CSS Method has three different structures for its 3 different arguments.

  • .css(name) - returns the CSS property of the value
  • .css(name,value) - sets a CSS property
  • .css({properties}) - sets multiple CSS properties

We will use the first two in this example.

Example <div id='firstDiv' style="width:150px; background-color:#D2BA0D;color:#000000;">firstDiv</div>
<div id='secondDiv' style="width:30px; background-color:#238B0A;color:#000000;">SecondDiv</div>
<input id='buttonOneId' name="buttonOne" type="button" value="Do Something!"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$("#buttonOneId").click(function()
{
var firstWidth = $('#firstDiv').css('width');
$("#secondDiv").css("width",firstWidth);
});
</script>

It is really just that simple. If you have ever had 2 or 3 divs inside 1 containing div, you know how hard it is to make all of the columns the same height or width. With JQuery, it is really just that simple. Of course, if you won't usually use a button to change CSS in that way, but you still may find yourself using events to change CSS for some other good reason. It would get very tedious if you wanted to change large amount of CSS properties, which is why we have the third syntax of the css() method.

Example <div id='thirdDiv' style="width:150px; height:40px; background-color:#FDE80B;color:#000000;">firstDiv</div>
<div id='fourthDiv' style="width:30px; background-color:#238B0A;color:#000000;">SecondDiv</div>
<input id='buttonTwoId' name="buttonTwo" type="button" value="Do Something!"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$("#buttonTwoId").click(function()
{
var thirdWidth = $('#thirdDiv').css('width');
var thirdHeight = $('#thirdDiv').css('height');
var thirdBG = $('#thirdDiv').css('background-color');
$("#fourthDiv").css({"width":thirdWidth,"height":thirdHeight,"background-color":thirdBG});
});
</script>

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments

No comments yet... Be the first!



Advertisement