无法设置undefined的属性'display'

I'm writting script to hide/show menu but I get some troubles.

我正在编写脚本隐藏/显示菜单但我遇到了一些麻烦。

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

In comment what I want to do finally, but even if I try with static var it's not working. In the CSS :

在评论我最终想要做什么，但即使我尝试使用静态var它也不起作用。在CSS中：

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

I try like this too :

我也是这样尝试的：

    .btn-pageMenu {display:none;}

No more success. Anybody have a suggestion ? I'm learning JS and I not finding errors when I compare with other similar scripts.

没有更多的成功。有人有建议吗？我正在学习JS，当我与其他类似的脚本进行比较时，我没有发现错误。

Thanks for your help :)

谢谢你的帮助：）

2 个解决方案

#1

document.getElementsByClassName('btn-pageMenu') delivers a nodeList. You should use: document.getElementsByClassName('btn-pageMenu')[0].style.display (if it's the first element from that list you want to change.

document.getElementsByClassName（'btn-pageMenu'）提供了一个nodeList。您应该使用：document.getElementsByClassName（'btn-pageMenu'）[0] .style.display（如果它是您想要更改的列表中的第一个元素。

If you want to change style.display for all nodes loop through the list:

如果要更改所有节点的style.display，请循环显示以下列表：

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

to be complete: if you use jquery it is as simple as:

完成：如果你使用jquery它就像：

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

#2

I've found this answer in the site https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/.

我在网站https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/中找到了这个答案。

In this code we add multiple styles in an element:

在此代码中，我们在元素中添加多个样式：

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>

#1