Ẩn tất cả các phần tử có lớp bằng cách sử dụng Javascript đơn giản

Question

Tôi thường sử dụng document.getElementById('id').style.display = 'none' để ẩn một div duy nhất thông qua Javascript. Có cách nào đơn giản tương tự để ẩn tất cả các phần tử thuộc cùng một lớp không?

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

Answer 1

Trong sự vắng mặt của 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> 

này được lấy từ câu hỏi này SO: Hide div by class id, tuy nhiên khi thấy bạn đang yêu cầu giải pháp JS "old-school", tôi tin rằng getElementsByClassName chỉ được các trình duyệt hiện đại hỗ trợ

Answer 2

tôi sử dụng một phiên bản sửa đổi điều này:

function getElementsByClass(nameOfClass) {  
    var temp, all, elements; 

    all = document.getElementsByTagName("*"); 
    elements = []; 

    for(var a=0;a<all.length;a++) { 
    temp = all[a].className.split(" "); 
    for(var b=0;b<temp.length;b++) { 
     if(temp[b]==nameOfClass) { 
     elements.push(ALL[a]); 
     break; 
     } 
    } 
    } 
    return elements; 
}; 

Và JQuery sẽ làm điều này thực sự dễ dàng quá.

Answer 3

function getElementsByClassName(classname, node) { 
    if(!node) node = document.getElementsByTagName("body")[0]; 
    var a = []; 
    var re = new RegExp('\\b' + classname + '\\b'); 
    var els = node.getElementsByTagName("*"); 
    for(var i=0,j=els.length; i<j; i++) 
     if(re.test(els[i].className))a.push(els[i]); 
    return a; 
} 

var elements = new Array(); 
elements = getElementsByClassName('yourClassName'); 
for(i in elements){ 
    elements[i].style.display = "none"; 
} 

Answer 4

Tôi biết OP không muốn thư viện cấp cao, trừ khi có nhu cầu giới hạn kích thước và tính toán, tôi khuyên bạn nên sử dụng nó ngay cả khi ứng dụng không được sử dụng ở nơi khác trong ứng dụng .

Ví dụ, sử dụng jQuery nó rất đơn giản:

$('.myClass').hide() 

Answer 5

Giả sử bạn đang đối phó với một lớp duy nhất cho mỗi phần tử:

function swapCssClass(a,b) { 
    while (document.querySelector('.' + a)) { 
     document.querySelector('.' + a).className = b; 
    } 
} 

và sau đó gọi đơn giản gọi nó với

swapCssClass('x_visible','x_hidden'); 

Answer 6

Câu trả lời trễ, nhưng tôi phát hiện ra rằng đây là giải pháp đơn giản nhất (nếu bạn không sử dụng jQuery):

var myClasses = document.querySelectorAll('.my-class'), 
    i = 0, 
    l = myClasses.length; 

for (i; i < l; i++) { 
    myClasses[i].style.display = 'none'; 
} 

Demo