Thêm/xóa CSS jQuery

Ví dụ, khi chúng ta nhấp vào nút màu xanh lá cây, jQuery sẽ thêm lớp nền xanh lục vào. Bây giờ, hãy tạo các lớp CSS để thực sự cung cấp cho trang màu nền mà chúng ta muốn

.green-background {
  background-color: green;
}

.yellow-background {
  background-color: yellow;
}

.red-background {
  background-color: red;
}

Và trang của chúng tôi hoạt động. Nhưng có một vấn đề. Nếu chúng tôi nhấp vào bất kỳ nút nào, mọi thứ đều ổn. Nhưng nếu sau đó chúng ta nhấp vào nút có màu nhạt hơn, nó sẽ không thay đổi nền. Vì vậy, nếu chúng ta nhấp vào Màu vàng rồi nhấp vào Màu đỏ, nó sẽ hoạt động. Nhưng nếu chúng ta nhấp vào rồi nhấp vào Màu xanh lá cây sau Màu đỏ, không có gì xảy ra. Chúng ta cần xóa các lớp khác trước khi áp dụng lớp mới. May mắn thay, điều đó thật dễ dàng

$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

Và bây giờ mọi thứ hoạt động hoàn hảo

$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

5 không có đối số sẽ loại bỏ tất cả các lớp khỏi phần tử đã chọn;

Có một cách khác để thay đổi CSS của một phần tử bằng jQuery

$("button#green").click(function() {
  $("body").css("background-color", "green");
});

Tuy nhiên, đây là một cách tiếp cận tồi đối với mã thực, vì hai lý do. Đầu tiên, nó trộn lẫn mối quan tâm của chúng tôi. JavaScript chịu trách nhiệm về cách trang hoạt động; . Ở đây, chúng tôi đã đặt một cái gì đó về giao diện của trang trong JavaScript của chúng tôi. Điều này gây khó khăn cho các lập trình viên khác, những người có thể cần thay đổi trang này trong tương lai để biết nơi tìm mã thích hợp. Thứ hai, bạn mất đi một trong những sức mạnh lớn nhất của CSS. khả năng tạo một lớp và sử dụng lại kiểu đó trên các thành phần và trang. Ở đây, khi chúng tôi đặt một kiểu trong JavaScript của mình, nó không thể được sử dụng lại. Vì vậy, khi bạn muốn thay đổi kiểu trang của mình, hãy thực hiện thêm và xóa các lớp

Một hàm trả về một hoặc nhiều tên lớp được phân tách bằng dấu cách sẽ được thêm vào (các) tên lớp hiện có. Nhận vị trí chỉ mục của phần tử trong tập hợp và (các) tên lớp hiện có làm đối số. Trong hàm,

$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

6 đề cập đến phần tử hiện tại trong tập hợp

đã thêm phiên bản. 3. 3 . addClass( chức năng )

• chức năng

  Loại. Hàm( Chỉ mục số nguyên, Chuỗi hiện tạiClassName ) => Chuỗi . Mảng

  Hàm trả về một hoặc nhiều tên lớp được phân tách bằng dấu cách hoặc một mảng tên lớp sẽ được thêm vào (các) tên lớp hiện có. Nhận vị trí chỉ mục của phần tử trong tập hợp và (các) tên lớp hiện có làm đối số. Trong hàm,

  $(document).ready(function() {
    $("button#green").click(function() {
      $("body").removeClass();
      $("body").addClass("green-background");
    });
  
    $("button#yellow").click(function() {
      $("body").removeClass();
      $("body").addClass("yellow-background");
    });
  
    $("button#red").click(function() {
      $("body").removeClass();
      $("body").addClass("red-background");
    });
  });
  

  6 đề cập đến phần tử hiện tại trong tập hợp

Điều quan trọng cần lưu ý là phương pháp này không thay thế một lớp. Nó chỉ đơn giản là thêm lớp, thêm nó vào bất kỳ lớp nào có thể đã được gán cho các phần tử

Trước phiên bản jQuery 1. 2/12. 2, phương thức

$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

8 thao túng thuộc tính

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

0 của các phần tử được chọn, không phải thuộc tính

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

1. Khi thuộc tính đã được thay đổi, chính trình duyệt đã cập nhật thuộc tính cho phù hợp. Hàm ý của hành vi này là phương pháp này chỉ hoạt động đối với các tài liệu có ngữ nghĩa HTML DOM (e. g. , không phải tài liệu XML thuần túy)

Kể từ jQuery 1. 2/12. 2, hành vi này được thay đổi để cải thiện hỗ trợ cho các tài liệu XML, bao gồm cả SVG. Bắt đầu từ phiên bản này, thuộc tính

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

1 được sử dụng thay thế. Vì vậy,

$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

8 có thể được sử dụng trên các tài liệu XML hoặc SVG

Có thể thêm nhiều lớp cùng một lúc, được phân tách bằng dấu cách, vào tập hợp các phần tử phù hợp, như vậy

1

$( "p" ).addClass( "myClass yourClass" );

Phương thức này thường được sử dụng với

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

4 để chuyển lớp của các phần tử từ lớp này sang lớp khác, như vậy

1

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Ở đây, các lớp

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

5 và

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

6 bị loại bỏ khỏi tất cả các đoạn văn, trong khi lớp

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

7 được thêm vào

Kể từ jQuery 1. 4, đối số của phương thức

$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

8 có thể nhận một hàm

1

2

3

$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

2

Đưa ra một danh sách không có thứ tự với hai phần tử

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

9, ví dụ này thêm lớp "item-0" vào

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

9 đầu tiên và "item-1" vào phần thứ hai

Làm cách nào để thêm và xóa kiểu CSS trong jQuery?

Làm cách nào để xóa kiểu CSS bằng jQuery?

Làm cách nào để xóa CSS trong JavaScript?

Làm cách nào để xóa tất cả thuộc tính CSS trong JavaScript?