jQuery manipulates CSS
jQuery has several methods for doing CSS manipulation. We will learn the following:
- addClass() - add one or more classes to the selected element
- removeClass() - removes one or more classes from the selected element
- toggleClass() - add/remove class toggle operation on the selected element
- css() - Set or return style properties
$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph. </p> <p>This is another paragraph. </p> <div>Here is some important text!</div> <br> <button>Add class to element</button>
Specify multiple classes in the addClass() method:
<script> $(document).ready(function(){ $("button").click(function(){ $("body div:first").addClass("important blue"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <div id="div1">This is some text. </div> <div id="div2">This is some text. </div> <br> <button>按钮</button>
jQuery removeClass() method
The following example shows how to remove the specified class attribute in different elements:
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 class="blue">标题 2</h2> <p class="blue">This is a paragraph. </p> <button>Remove class from element</button>
jQuery toggleClass() method
The following example will show how to use the jQuery toggleClass() method. This method performs the switching operation of adding/deleting classes to the selected element
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:red; } </style> </head> <body> <h1 class="blue">The island is deep in the sea</h1> <h2 class="blue">You are in my heart</h2> <p class="blue">The best you in the world</p> <p>But I'm just passing by your world</p> <br> <button>Be careful</button>
----------------------------------------------------------------------------------------------------------------
Set CSS properties
To set a specified CSS property, use the following syntax:
css("
propertyname
","
value
");
$(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","yellow"); }); }); </script> </head> <body> <h2>This is a header</h2> <p style="background-color:#ff0000">This is a paragraph. </p> <p style="background-color:#00ff00">This is a paragraph. </p> <p style="background-color:#0000ff">This is a paragraph. </p> <p>This is a paragraph. </p> <button>Set the background-color of the p element </button>When setting multiple css styles, you need to separate them by { } and connect them.