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.