Apply CSS to controls using jQuery

Home » JQuery » jQuery Interesting codes » Apply CSS to controls using jQuery

Apply CSS to controls using jQuery

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Interesting codes

CSS plays important part in designing UI.
We usually use CSS classes or inline style tag to apply CSS to controls.
We can use jQuery to change CSS runtime i.e. on some event like page load or on on button click.
jQuery has methods to apply CSS with ease and change CSS runtime.

Watch Live Demo

We can apply or change CSS using following jQuery methods :

Example 1 : .css()

.css() method is very handy in applying css to controls on page.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#apply').click(function () {
            alert('clicked');
            $('#target').css("color", "red");
        });
    });
</script>
</head>
<body>
<p id="target">This css method of jQuery. This method applies CSS to controls.</p>
<button id="apply">Click ME!</button>
<button  onclick="location.reload()">Reset</button>
</body>
</html>

Demo :

In the above example, we have used css method to change the color of text. We have applied single css property, similarly we can set more than one.

Example 2 : .css() with multiple properties

We can also set multiple properties using css() method. We use different syntax to set multiple properties.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#apply').click(function () {
            $('#target').css({ 'color': 'red', 'font-weight': 'bold', 'font-family': 'comic sans ms' });
        });
    });
</script>
</head>
<body>
<p id="target">This css method of jQuery. This method applies CSS to controls.</p>
<button id="apply">Click ME!</button>
<button  onclick="location.reload()">Reset</button>
</body>
</html>

Demo :

In the above example, we have set multiple css properties using the same css() method. We can also use variable to set the css properties. We can assign all to properties to set to a variable and then use that variable as a parameter to css() method. We have demonstrated the use of variable in following example.

Example 3 : css() using variable

We can assign all the css properties to a variable and can use this variable to set the css. This approach will save our time from writing the same css properties again and again.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#apply').click(function () {
            var css = { 'color': 'red', 'font-weight': 'bold', 'font-family': 'comic sans ms' };
            $('#target').css(css);
        });
    });
</script>
</head>
<body>
<p id="target">This css method of jQuery. This method applies CSS to controls.</p>
<button id="apply">Click ME!</button>
<button  onclick="location.reload()">Reset</button>
</body>
</html>

Demo :

In the above example, we have assign all the css properties to a variable and used the same variable to apply the CSS.

Example 4 : addClass()

We can also use addClass() method to apply css. We can create a CSS class with all properties defined with values and we can use addClass() method to apply the CSS class.

<html>
<head>
<style type="text/css">
.css
{
color:red;
font-weight:bold;
font-family:comic sans ms;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#apply').click(function () {
            $('#target').addClass("css");
        });
    });
</script>
</head>
<body>
<p id="target">This css method of jQuery. This method applies CSS to controls.</p>
<button id="apply">Click ME!</button>
<button  onclick="location.reload()">Reset</button>
</body>
</html>

Demo :

In the above example, we have created a CSS class. On button click we are assigning the CSS class to the text using addClass() method.