JavaScript ẩn tất cả các phần tử theo lớp

Tôi thường sử dụng

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Tôi cần một giải pháp Javascript đơn giản không sử dụng jQuery

Rõ ràng SO muốn tôi chỉnh sửa điều này để làm rõ rằng đó không phải là câu hỏi về việc sửa đổi chuỗi. Nó không thể

Giải pháp tốt nhất

Trong trường hợp không có jQuery, tôi sẽ sử dụng một cái gì đó như thế này

<script>
    var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.visibility = "hidden"; // or
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }
<script>

Điều này được lấy từ câu hỏi SO này. Ẩn div theo id lớp, tuy nhiên thấy rằng bạn đang yêu cầu giải pháp JS "trường học cũ", tôi tin rằng getElementsByClassName chỉ được hỗ trợ bởi các trình duyệt hiện đại

Giải pháp liên quan

Javascript – Cách thay đổi lớp của phần tử bằng JavaScript

Kỹ thuật HTML5 hiện đại để thay đổi lớp

Các trình duyệt hiện đại đã thêm classList cung cấp các phương thức giúp thao tác với các lớp dễ dàng hơn mà không cần thư viện

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Thật không may, những thứ này không hoạt động trong Internet Explorer trước v10, mặc dù có một miếng đệm để thêm hỗ trợ cho IE8 và IE9, có sẵn từ trang này. Tuy nhiên, nó ngày càng được hỗ trợ nhiều hơn

Giải pháp đa trình duyệt đơn giản

Cách JavaScript tiêu chuẩn để chọn một phần tử là sử dụng

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Để thay đổi tất cả các lớp cho một phần tử

Để thay thế tất cả các lớp hiện có bằng một hoặc nhiều lớp mới, hãy đặt thuộc tính className

document.getElementById("MyElement").className = "MyClass";

(Bạn có thể sử dụng danh sách được phân cách bằng dấu cách để áp dụng nhiều lớp. )

Để thêm một lớp bổ sung vào một phần tử

Để thêm một lớp vào một phần tử mà không xóa/ảnh hưởng đến các giá trị hiện có, hãy thêm một khoảng trắng và tên lớp mới, như vậy

document.getElementById("MyElement").className += " MyClass";

Để xóa một lớp khỏi một phần tử

Để xóa một lớp đơn lẻ thành một phần tử mà không ảnh hưởng đến các lớp tiềm năng khác, cần phải thay thế biểu thức chính quy đơn giản

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Một lời giải thích của regex này là như sau

Cờ

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Để kiểm tra xem một lớp đã được áp dụng cho một phần tử chưa

Biểu thức chính được sử dụng ở trên để xóa một lớp cũng có thể được sử dụng để kiểm tra xem một lớp cụ thể có tồn tại hay không

<script>
    var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.visibility = "hidden"; // or
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }
<script>

Mặc dù có thể viết JavaScript trực tiếp bên trong các thuộc tính sự kiện HTML (chẳng hạn như

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Bước đầu tiên để đạt được điều này là tạo một hàm và gọi hàm đó trong thuộc tính onclick chẳng hạn

<script>
    var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.visibility = "hidden"; // or
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }
<script>

(Không bắt buộc phải có mã này trong thẻ tập lệnh, đây chỉ đơn giản là ví dụ ngắn gọn và bao gồm JavaScript trong một tệp riêng biệt có thể phù hợp hơn. )

Bước thứ hai là di chuyển sự kiện onclick ra khỏi HTML và chuyển sang JavaScript, chẳng hạn như sử dụng addEventListener

<script>
    var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.visibility = "hidden"; // or
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }
<script>

(Lưu ý rằng cửa sổ. phần onload là bắt buộc để nội dung của hàm đó được thực thi sau khi HTML tải xong - nếu không có phần này, MyElement có thể không tồn tại khi mã JavaScript được gọi, do đó dòng đó sẽ bị lỗi. )

Thư viện và khung JavaScript

Đoạn mã trên đều ở dạng JavaScript tiêu chuẩn, tuy nhiên, thông thường người ta sử dụng khung hoặc thư viện để đơn giản hóa các tác vụ thông thường, cũng như hưởng lợi từ các lỗi đã sửa và các trường hợp cạnh mà bạn có thể không nghĩ đến khi viết mã của mình

Mặc dù một số người cho rằng việc thêm khung ~50  KB chỉ để thay đổi một lớp là quá mức cần thiết, nhưng nếu bạn đang thực hiện bất kỳ khối lượng đáng kể nào đối với JavaScript hoặc bất kỳ thứ gì có thể có hành vi bất thường trên nhiều trình duyệt, thì bạn nên cân nhắc

(Đại khái, thư viện là một bộ công cụ được thiết kế cho một nhiệm vụ cụ thể, trong khi một khung thường chứa nhiều thư viện và thực hiện một bộ nhiệm vụ hoàn chỉnh. )

Các ví dụ trên đã được sao chép bên dưới bằng cách sử dụng jQuery, có lẽ là thư viện JavaScript được sử dụng phổ biến nhất (mặc dù cũng có những ví dụ khác đáng để nghiên cứu)

(Lưu ý rằng

document.getElementById("MyElement").className = "MyClass";

Thay đổi lớp học với jQuery

<script>
    var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.visibility = "hidden"; // or
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }
<script>

Ngoài ra, jQuery cung cấp lối tắt để thêm một lớp nếu nó không áp dụng hoặc xóa một lớp không áp dụng.

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

hoặc, không cần id

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Javascript – So sánh hai ngày với JavaScript

Đối tượng Date sẽ làm những gì bạn muốn - xây dựng một đối tượng cho mỗi ngày, sau đó so sánh chúng bằng cách sử dụng ________ 51, ________ 52, ________ 53 hoặc ________ 54

Các toán tử

document.getElementById("MyElement").className = "MyClass";

document.getElementById("MyElement").className = "MyClass";

document.getElementById("MyElement").className = "MyClass";

document.getElementById("MyElement").className = "MyClass";

document.getElementById("MyElement").className = "MyClass";

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

để rõ ràng, chỉ cần kiểm tra sự bằng nhau trực tiếp với các đối tượng ngày sẽ không hoạt động

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Tuy nhiên, tôi khuyên bạn nên sử dụng menu thả xuống hoặc một số hình thức nhập ngày bị ràng buộc tương tự thay vì hộp văn bản, vì sợ rằng bạn sẽ thấy mình trong địa ngục xác thực đầu vào

Đối với tài liệu tò mò,

document.getElementById("MyElement").className = "MyClass";

Trả về giá trị số của ngày được chỉ định dưới dạng số mili giây kể từ ngày 1 tháng 1 năm 1970, 00. 00. 00 UTC. (Các giá trị âm được trả về cho các lần trước. )

Làm cách nào để ẩn tất cả các thành phần của lớp trong HTML?

Để ẩn phần tử, đặt thuộc tính hiển thị kiểu thành “không” .

Làm cách nào để ẩn và hiển thị lớp trong JavaScript?

Cách Hiện/Ẩn phần tử theo lớp trong JavaScript .

Thêm nút để hiện/ẩn phần tử. .

Bộ chọn DOM để tìm phần tử theo Lớp. .

Hiển thị phần tử ẩn với display = “block”.

Ẩn phần tử với display = “none”.

Đính kèm trình xử lý sự kiện “nhấp chuột” cho nút

Làm cách nào để ẩn tất cả div trong JavaScript?

JavaScript – Ẩn Div . Phong cách. tài sản hiển thị. get reference to the div element, and assign value of "none" to the element. style. display property.

Làm cách nào để hiển thị không theo tên lớp trong JavaScript?

getElementById('id'). kiểu. display = 'none' để ẩn một div qua Javascript.