Home » Tutorials » JavaScript » jQuery With CSS

jQuery With CSS

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>


Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "jQuery With CSS". After Hours Programming. Accessed on March 17, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-css/.

  • Stewart, Suzy. "jQuery With CSS". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-css/. Accessed 17 March, 2024.

  • Stewart, Suzy. jQuery With CSS. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-css/.



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.