Cách sử dụng các phương thức jQuery để tương tác với CSS class

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,989
Được Like
12,732
Cách sử dụng các phương thức jQuery để tương tác với 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"
Mã:
<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>

Chúc các bạn thành công.


Nguồn: Internet​
 

Top Bottom