Apply CSS styles using jQuery
Here I am explaing how to apply CSS styles using jQuery. It is simple to apply styles using jQuery.
<html>
<head>
<title>This is jquery example for applying bold and italic for given elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').addClass('boldtext');
$('#pid').addClass('italictext');
});
</script>
<style type="text/css">
.boldtext
{
font-weight:bold;
}
.italictext
{
font-style:italic;
}
</style>
</head>
<body>
<p>This is jquery example to make text as bold by applying class name to 'p' element itself</p>
<p id="pid">
This is jquery example to make text as italic by applying class name to 'p' id
</p>
</body>
</html>
In the above code we have two <p> tags. We make the these <p> tags text bold and italic bys using jQuery as given below.
$('p').addClass('boldtext');
$('#pid').addClass('italictext');
In the first line we make the all <p> tags text bold by applying "boldtext" CSS class to $('p'). $('p') means we are accessing all <p> tags.
In the second line we make the HTML tag texts whose id is "pid" as italic by applying "italictext" CSS class to $('#pid'). $('#pid') means we are accesing the HTML tags whose id is "pid".
Place all above HTML code in a HTML file and open it in any browser. You can find that all text in bold and only second line is in italic because we did all <p> tags text in bold by using $('p').addClass('boldtext') and we apply the italic style to second <p> tag only by using $('#pid').addClass('italictext').
Some times you have to apply different styles to alternative elements. For example, if you have some div tags and you need to apply different styles to alternative elements. For this type of requirement jQuery provides good solution as shown below.
<html>
<head>
<title>This is jquery example for applying the styles for alternative elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:odd').addClass('boldtext');
$('div:even').addClass('italictext');
$('p:eq(2)').addClass('italicbold');
});
</script>
<style type="text/css">
.boldtext
{
font-weight:bold;
}
.italictext
{
font-style:italic;
}
.italicbold
{
font-weight:bold;
font-weight:bold;
}
</style>
</head>
<body>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
</body>
</html>
As shown above, we apply the different styles for alternative div tags by using below jQuery code.
$('div:odd').addClass('boldtext');
$('div:even').addClass('italictext');
$('div:odd').addClass('boldtext') means "boldtext" CSS class added to odd number div tags.
$('div:even').addClass('italictext') means "italictext" CSS class added to even number div tags.
The above HTML code also includes one more functionality. That is $('p:eq(2)').addClass('italicbold'). $('p:eq(2)') represents the 3rd <p> tag element of all <p> tags in the HTML code. "eq" is the jQuery function, it will take index of the elements. In jQuery index starts from 0. Here we are making 3rd <p> tag text as italic and bold by applying "italicbold" CSS class to it.
Download source code: second jQuery exmp.zip (36.22 kb)
