Невозможно установить свойство 'display' из undefined

Я пишу script, чтобы скрыть/показать меню, но я получаю некоторые проблемы.

    function displayMenu() {
//var classMenu = event.target.className;
//classMenu += 'Menu';
    //document.getElementsByClassName(classMenu).style.display = 'block';
document.getElementsByClassName('btn-pageMenu').style.display = 'block';
    }

В комментарии, что я хочу сделать, наконец, но даже если я попробую с static var, он не работает. В CSS:

    fieldset.toolsbox ul.btn-pageMenu {display:none;}

Я тоже пробую:

    .btn-pageMenu {display:none;}

Больше нет успеха. У кого-нибудь есть предложение? Я изучаю JS, и я не нахожу ошибок, когда сравниваю с другими подобными сценариями.

Спасибо за вашу помощь:)

Ответ 1

document.getElementsByClassName('btn-pageMenu') предоставляет nodeList. Вы должны использовать: document.getElementsByClassName('btn-pageMenu')[0].style.display (если это первый элемент из этого списка, который вы хотите изменить.

Если вы хотите изменить style.display для всех узлов, проходящих через список:

var elems = document.getElementsByClassName('btn-pageMenu');
for (var i=0;i<elems.length;i+=1){
  elems[i].style.display = 'block';
}

чтобы быть полным: если вы используете jquery, это просто:

$('.btn-pageMenu').css('display','block');

Ответ 2

Я нашел этот ответ на сайте https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/.

В этом коде мы добавляем несколько стилей в элемент:

let
    element = document.querySelector('span')
  , cssStyle = (el, styles) => {
      for (var property in styles) {
          el.style[property] = styles[property];
      }
  }
;

cssStyle(element, { background:'tomato', color: 'white', padding: '0.5rem 1rem'});

span{
font-family: sans-serif;
color: #323232;
background: #fff;
}

<span>
lorem ipsum
</span>