Скрыть все элементы класса с помощью простого Javascript

Ответ 1

В отсутствие 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>

Это взято из этого вопроса SO: Скрыть div по идентификатору класса, однако, видя, что вы просите решение "старой школы" JS, я считаю, что getElementsByClassName поддерживается только современными браузерами

Ответ 2

Поздний ответ, но я узнал, что это самое простое решение (если вы не используете jQuery):

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

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

Демо

Ответ 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";
}

Ответ 4

Предполагая, что вы имеете дело с одним классом на элемент:

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

а затем просто вызовите его с помощью

swapCssClass('x_visible','x_hidden');

Ответ 5

Есть много способов скрыть все элементы, у которых есть определенный класс в javascript. Одним из способов является использование цикла for, но здесь я хочу показать вам другие способы сделать это.

1.forEach и querySelectorAll('.classname')

document.querySelectorAll('.classname').forEach(function(el) {
   el.style.display = 'none';
});

2.для... из с getElementsByClassName

for (let element of document.getElementsByClassName("classname")){
   element.style.display="none";
}

3.Array.protoype.forEach getElementsByClassName

Array.prototype.forEach.call(document.getElementsByClassName("classname"), function(el) {
    // Do something amazing below
    el.style.display = 'none';
});

4.[].forEach и getElementsByClassName

[].forEach.call(document.getElementsByClassName("classname"), function (el) {
    el.style.display = 'none';
});

Я показал некоторые из возможных способов, есть и другие способы сделать это, но из приведенного выше списка вы можете выбрать любой удобный для вас вариант.

Примечание: все вышеперечисленные методы поддерживаются в современных браузерах, но, возможно, некоторые из них не будут работать в браузерах старости, таких как Internet Explorer.

Ответ 6

Я использую модифицированную версию этого:

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;
};

И JQuery тоже сделает это очень легко.

Ответ 7

Я бы предложил другой подход. Вместо того, чтобы изменять свойства всех объектов вручную, давайте добавим новый CSS в документ:

/* License: CC0 */
var newStylesheet = document.createElement('style');
newStylesheet.textContent = '.classname { display: none; }';
document.head.appendChild(newStylesheet);

Ответ 8

Я знаю, что OP не хочет библиотеки высокого уровня, но, если нет реальной потребности в ограничении размера и вычислений, я предлагаю использовать один, даже если он не будет использоваться в другом месте приложения.

Например, используя jQuery, это очень просто:

$('.myClass').hide()