Question

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

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

在评论我最终想要做什么，但即使我尝试使用静态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>

无法设置undefined的属性'display'

2 个答案: