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 屬性操作。