jQuery Attributes - hasClass() - addclass() - removeclass()

Hàm hasClass() dùng để kiểm tra một đối tượng HTML có tồn tại className nào đó hay không?

Cú pháp hàm hasClass():

$('selector').hasClass(className)

Kết quả:

  • TRUE nếu đối tượng có class truyền vào

  • FALSE nếu đối tượng không có class truyền vào

Hàm addClass() trong jQuery

Hàm addClass() có tác dụng thêm class cho đối tượng Object HTML nào đó.

Ví dụ: Thêm class active vào thẻ h1

$('h1').addClass('active');

Hàm removeClass trong jQuery

Hàm này removeClass() có tác dụng xóa class cho đối tượng Object HTML nào đó.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <style>
            .active{
                border: solid 1px;
                color:red;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h1 style="font-style: initial">Xin chào các bạn</h1>
         
        <input type="button" id="addclass-button" value="$.addClass('active')" /> 
        <input type="button" id="removeclass-button" value="$.removeClass('active')" />
         
        <script language="javascript">
             
            // Sự kiện onload trong jquery
            $(document).ready(function()
            {
                // addClass
                $('#addclass-button').click(function(){
                    // Thêm class active vào thẻ h1
                    $('h1').addClass('active');
                });
                 
                // removeClass
                $('#removeclass-button').click(function(){
                    // Xóa class active ra khỏi thẻ h1
                    $('h1').removeClass('active');
                });
            });
             
        </script>
    </body>
</html>

Last updated