Liên hệ
Ủng hộ, đăng ký theo dõi kênh

jQuery và CSS class

Sử dụng các phương thức jQuery .addClass(), .hasClass(), .removeClass(), .toggleClass() để tương tác với CSS class

jQuery và CSS class

jQuery có một số phương thức làm việc với class CSS như: .addClass(), .hasClass(), .removeClass(), .toggleClass()

  • addClass thêm class vào phần tử
  • removeClass xóa đi class trong phần tử
  • hasClass kiểm tra xem phần tử có một CSS class hay không
  • toggleClass thêm class nếu nó đang có trong phần tử, nếu không thì xóa class

Xem một số trường hợp:

$("div").addClass("header") : thêm class có tên header vào các phần tử div. Cũng có thể thêm nhiều class như $("div").addClass("class1 class2 class3")

Ví dụ

Ví dụ sau sẽ thêm bớt, kiểm tra phần tử với class có tên "classexam1"

Đoạn văn trong phần tử
<style>
    .pclass {
        padding: 5px;
        font-size: 25px;
        border: 1px dashed coral;
        margin: 10px 0;
    }

    .classexam1 {
        background: #e91e63;
        color: #9e9e9e;
        border: 5px solid coral;

    }

    #inforhtml {font-style: italic;}
</style>

<p id="inforhtml"></p>
<div class="pclass">Đoạn văn trong phần tử</div>


<div>
    <button onclick="addClass()">.addClass</button>
    <button onclick="removeClass()">.removeClass</button>
    <button onclick="toggleClass()">.toggleClass</button>
    <button onclick="hasClass()">.hasClass</button>
</div>

<script>

    function addClass() {
        $("div.pclass").addClass("classexam1");
        showhtml();
    }

    function removeClass() {
        $("div.pclass").removeClass("classexam1");
        showhtml();
    }

    function toggleClass() {
        $("div.pclass").toggleClass("classexam1");
        showhtml();
    }

    function hasClass() {
       if ($("div.pclass").hasClass("classexam1"))
           alert("Phần tử có class: classexam1");
       else
           alert("Phần tử không có class: classexam1");

    }

    function showhtml() {
        $("#inforhtml").text($("div.pclass")[0].outerHTML);
    }

    showhtml();

</script>

Vui lòng đăng ký ủng hộ kênh