javascript - 无法设置未定义的属性“显示”

Question

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

    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，当我与其他类似的脚本进行比较时，我没有发现错误。

谢谢你的帮助 ：）

Answer 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');​​​​​​

Answer 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>