Dynamically Add a Class to Your HTML with jQuery
jQuery makes it super easy to dynamically add a class (0r several classes) to any HTML element(s) using only one line of code and the .addClass() method. This trick can be really useful if you want to change the styling of a particular element depending on certain conditions, which you can define using jQuery code.
Let's say you'd like to use jQuery to add a new class that will change the text to make it blue:
Your CSS class might look something like this:
[css]
.blue{
color: blue;
}
[/css]
To apply the .blue class to the p tag, you'll want to use jQuery code that resembles the following:
[javascript]
$('p').addClass('blue');
[/javascript]
And your results should look like this:
If you want a class addition to be contingent upon certain conditions, make sure you include the .addClass() code within an if statement or a function defining your desired conditions.
Your CSS class might look something like this:
[css]
.blue{
color: blue;
}
[/css]
To apply the .blue class to the p tag, you'll want to use jQuery code that resembles the following:
[javascript]
$('p').addClass('blue');
[/javascript]
And your results should look like this:
If you want a class addition to be contingent upon certain conditions, make sure you include the .addClass() code within an if statement or a function defining your desired conditions.
