jQuery và 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"

<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>