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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,047
Reaction score
7,279
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. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom