jQuery Css Function Example

Let's have a closer look at the jQuery .css() function.

Demo Code Download

Description

Change your website styles dynamically with jQuery's .css() function. You can change any styles you would normally declare in a Stylesheet such as "color" (text colour), "background-color", "font-size" etc. You can both get and set the current styles for a specified element. I prefer to use the following syntax as it gives greater flexibilty when changing mutiple styles.

$('selector').css({
  "property":"value",
  "propertyN":"valueN"
});
Lets have a look at an example of the css jQuery function in action. Further Reading »

Demo

jQuery Function Demo - jQuery4u.com

Demo 1: Changing text colour and background colour

Run Demo View Code

Blue text with orange background.

Demo 2: Adding a stylesheet.

Run Demo View Code


Download

The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .css() function demo so you can try it yourself and change as you please.

The full code listing for all jQuery functions have been now added to GitHub, you can get them there, we are making them work with the latest versions of jQuery!

Code

<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>

    <script type="text/javascript">

    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ CSS Demo 1 ------------------------------ */
            "css1":
            {
                run: function(id)
                {
                    $('div#'+id).css({
                        "color":"Blue",
                        "background-color":"orange"
                    });
                },

                reset: function(id)
                {
                    $('div#'+id).css({
                        "color":"black",
                        "background-color":"transparent"
                    });
                }
            },

            /* ------------------------------ CSS Demo 2 ------------------------------ */
            "css2":
            {
                run: function(id)
                {
                    $("head").append('<link rel="stylesheet" type="text/css" href="/function-demos/functions/css/css/demostyles.css" />');
                    $('div#'+id).html('Stylesheet demostyles.css added. To revert click reset above.');
                },

                reset: function(id)
                {
                    $('link[href="/function-demos/functions/css/css/demostyles.css"]').remove();
                    $('div#'+id).html('Stylesheet demostyles.css removed.');
                }
            }
        }
    }
    </script>

</head>
<body>

<h3>Demo 1: Changing text colour and background colour</h3>
<p><a href="#" id="css1-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="css1-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="css1-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="css1"><p style="font-size:24px;padding:10px;">Blue text with orange background.</p></div>

<h3>Demo 2: Adding a stylesheet.</h3>
<p><a href="#" id="css2-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="css2-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="css2-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="css2" style="padding:0;"></div>

</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->