jQuery 新增和刪除 CSS 類
在本教程中，你將學習如何使用 jQuery 新增或刪除 CSS 類。
jQuery CSS 類操作
jQuery 提供了幾種方法，如 addClass()、 removeClass() 和 toggleClass() 等來操縱分配給 HTML 元素 CSS 類。
jQuery addClass() 方法
jQuery addClass() 方法將一個或多個類新增到所選元素。
下面的例子將在按下按鈕後，將 .page-header 類新增到 <h1> ，將 .highlight 類新增到具有 .hint 類的 <p> 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery addClass() Demo</title>
<style type="text/css">
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1").addClass("page-header");
$("p.hint").addClass("highlight");
});
});
</script>
</head>
<body>
<h1>Demo Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="hint"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Add Class</button>
</body>
</html>
你還可以一次向元素新增多個類。只需在 addClass() 方法中指定空格分隔的類列表，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery addClass() Demo</title>
<style type="text/css">
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1").addClass("page-header highlight");
});
});
</script>
</head>
<body>
<h1>Hello World</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<button type="button">Add Class</button>
</body>
</html>
jQuery removeClass() 方法
同樣，你可以使用 jQuery removeClass() 方法從元素中刪除類。該 removeClass() 方法可以從所選元素中一次刪除單個類，多個類或所有類。
下面的例子將在點選按鈕後，將從 <h1> 刪除類 .page-header，以及從 <p> 上刪除類 .hint 和 .highlight。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass() Demo</title>
<style type="text/css">
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1").removeClass("page-header");
$("p").removeClass("hint highlight");
});
});
</script>
</head>
<body>
<h1 class="page-header">Demo Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Remove Class</button>
</body>
</html>
在沒有引數的情況下呼叫 removeClass() 方法時，它將從所選元素中刪除所有類。這是一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass() Demo</title>
<style type="text/css">
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1").removeClass();
$("p").removeClass();
});
});
</script>
</head>
<body>
<h1 class="page-header">Demo Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Remove Class</button>
</body>
</html>
jQuery toggleClass() 方法
jQuery toggleClass() 以這樣的方式從所選元素中新增或刪除一個或多個類，如果所選元素已經具有該類，則將其刪除; 如果一個元素沒有該類，則新增它，即切換類。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery toggleClass() Demo</title>
<style type="text/css">
p{
padding: 10px;
cursor: pointer;
font: bold 16px sans-serif;
}
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).toggleClass("highlight");
});
});
</script>
</head>
<body>
<p>Click on me to toggle highlighting.</p>
<p class="highlight">Click on me to toggle highlighting.</p>
<p>Click on me to toggle highlighting.</p>
</body>
</html>
你將在下一章中瞭解 CSS 屬性操作。