search

Làm cách nào để thêm CSS vào lớp bằng jQuery?

1 năms trước
Trả lời: 0
Lượt xem: 99

jQuery. Thay đổi lớp CSS bằng jQuery Cập nhật lần cuối vào ngày 19 tháng 8 năm 2022 21. 50. 45 (UTC/GMT +8 giờ)

Show

jQuery Bài tập thực hành Phần I. Bài tập-36

Thay đổi lớp CSS bằng jQuery

Giải pháp mẫu

Mã HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
  <title>Change a CSS class name using jQuery.</title>
  </head>
  <body>
  <p id="pid"  class="center"> jQuery Exercises</p>
  <input id="button1" type="button" value="Click to change the Class" />
</body>
</html>

Mã CSS

p.center {
    text-align: center;
    color: red;
}

p.large {
    font-size: 200%;
}

Mã JavaScript


$(document).ready(function(){ 
  $('#button1').click(function(){   $('#pid').removeClass('center').addClass('large');       
   });
});

Xem Bút jquery-practical-exercise-36 của w3resource (@w3resource) trên CodePen


Đóng góp mã và nhận xét của bạn thông qua Disqus

Trước. Vô hiệu hóa một liên kết bằng jQuery
Kế tiếp. Thêm một lớp CSS bằng jQuery

Mức độ khó của bài tập này là gì?

Dễ dàng trung bình khó

Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource



Theo dõi chúng tôi trên Facebook và Twitter để cập nhật thông tin mới nhất.

  • Xu hướng hàng tuần
  • Bài tập lập trình Java cơ bản
  • Truy vấn con SQL
  • Bài tập cơ sở dữ liệu Adventureworks
  • Bài tập cơ bản C# Sharp
  • SQL COUNT() với sự khác biệt
  • Bài tập chuỗi JavaScript
  • Xác thực biểu mẫu HTML JavaScript
  • Bài tập bộ sưu tập Java
  • hàm SQL COUNT()
  • Tham gia bên trong SQL
  • Hàm JavaScript Bài tập
  • Hướng dẫn Python
  • Bài tập mảng Python
  • Tham gia chéo SQL
  • Bài tập về mảng Sharp trong C#

jQuery cung cấp ba phương thức addClass(), removeClass() và toggleClass() để thao tác với các lớp CSS của các phần tử

Chúng tôi đã chia cuộc thảo luận về thao tác CSS thành hai phần. Chương này sẽ thảo luận về thao tác với các lớp CSS và chương tiếp theo sẽ thảo luận về thao tác với các thuộc tính CSS

jQuery - Thêm các lớp CSS

jQuery cung cấp phương thức addClass() để thêm một lớp CSS vào (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức addClass()

$(selector).addClass(className);

Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách để thêm vào thuộc tính lớp của từng phần tử khớp. 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

$(selector).addClass("Class1 Class2");

Tóm tắt

Xem xét nội dung HTML sau với các lớp CSS được xác định




   
jQuery addClass() Method

   
Hello

   
Goodbye

Bây giờ nếu chúng ta sử dụng phương thức addClass() như sau

$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );

Nó sẽ tạo ra kết quả sau


   
jQuery addClass() Method

   
Hello

   
Goodbye

Xin lưu ý rằng phương thức addClass() không thay thế một lớp hiện có, thay vào đó, nó chỉ đơn giản là thêm lớp, nối nó vào bất kỳ lớp nào có thể đã được gán cho các phần tử

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

________số 8_______

jQuery - Xóa các lớp CSS

jQuery cung cấp phương thức removeClass() để xóa một lớp CSS hiện có khỏi (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức removeClass()

$(selector).removeClass(className);

Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách sẽ bị xóa khỏi thuộc tính lớp của từng phần tử phù hợp. Nhiều lớp có thể bị xóa cùng một lúc, được phân tách bằng dấu cách, khỏi tập hợp các phần tử phù hợp, như vậy

$(selector).removeClass("Class1 Class2");

Tóm tắt

Xem xét nội dung HTML sau với các lớp CSS được xác định




   
jQuery removeClass() Method

   
Hello

   
Goodbye

Bây giờ nếu chúng ta sử dụng phương thức removeClass() như sau

$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );

Nó sẽ tạo ra kết quả sau

$(selector).addClass("Class1 Class2");
0

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

$(selector).addClass("Class1 Class2");
1

jQuery - Chuyển đổi các lớp CSS

jQuery cung cấp phương thức toggleClass() để chuyển đổi một lớp CSS trên (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức toggleClass()

$(selector).addClass("Class1 Class2");
2

Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách sẽ được bật. Nếu một phần tử trong tập hợp các phần tử phù hợp đã có lớp, thì phần tử đó sẽ bị xóa;

Thí dụ

Hãy thử ví dụ sau và kiểm chứng kết quả

$(selector).addClass("Class1 Class2");
3

Tài liệu tham khảo HTML/CSS jQuery

Bạn có thể tham khảo đầy đủ tất cả các Phương thức jQuery để thao tác nội dung CSS và HTML tại trang sau. Tài liệu tham khảo HTML/CSS jQuery

Làm cách nào để thêm lớp CSS bằng ID trong jQuery?

jQuery đi kèm với addClass() và removeClass() để thêm hoặc xóa lớp CSS một cách linh hoạt. Ví dụ: $('#para1'). addClass('highlight'); – Thêm một lớp css “highlight' vào các phần tử chứa id của “para1”.

Làm cách nào để thêm CSS vào lớp trong JavaScript?

Để làm điều đó, trước tiên, chúng tôi tạo một lớp và gán lớp đó cho các thành phần HTML mà chúng tôi muốn áp dụng thuộc tính CSS . Chúng ta có thể sử dụng các thuộc tính className và classList trong JavaScript. Tiếp cận. Thuộc tính className được sử dụng để thêm một lớp trong JavaScript.

Làm cách nào để thêm CSS quan trọng bằng jQuery?

Gọi phương thức addClass() trên bộ chọn và chỉ định tên lớp của bạn trong phương thức. .
Cú pháp – $( bộ chọn ). addClass(tên lớp);
Example