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

PVS

Generalissimo
Thành viên BQT
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​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top