对标签元素的 setAttribute 调用不起作用答案

【问题标题】：setAtrribute call on a tag element does not work对标签元素的 setAttribute 调用不起作用
【发布时间】：2017-10-25 22:56:36
【问题描述】：

我是 HTML5、CSS 和 Javascript 的新手。因此，如果我的问题非常基本，我深表歉意。我正在开发一个响应式导航菜单。当浏览器的宽度大于 500 时，会出现垂直导航栏。一旦屏幕页面的大小小于 500（例如在手机上），应该隐藏水平导航栏，而是显示汉堡图标。单击汉堡菜单时，汉堡图标下方将显示一个垂直导航栏。但问题是当我在导航栏上调用 setAttribute("visibility", "visible") 或 setAttribute("visibility", "hidden") 时它不起作用。我不确定为什么。 setAttribute 在屏幕加载时间或单击汉堡图标时调用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/page-main.css">
    <link rel="stylesheet" href="./css/master.css">
    <link rel="stylesheet" href="./css/footer.css">
    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">

    <!-- fonts -->
  <title>Home Page</title>
  </head>
  <body  onload="hideORShow()">
    <header>

    <nav id="navigation-links" class="navbar navigation-box">
      <div class="col-1of6 nav-item">
        <a class="main-nav-item-page-index" href="./index.html">Home</a>
      </div>

      <div class="col-1of6 nav-item" >
        <a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
      </div>

      <div class="col-1of6 nav-item">
        <a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
      </div>

      <div class="col-1of6 nav-item">
        <a class="main-nav-item-page-index" href="./leather.html">Leather</a>
      </div>
    </nav>
    <div class="open-slide">
      <a href="#">
        <svg id="hamburgur-icon" onClick="openSlideMenu()">
          <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
          <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
          <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
        </svg>
      </a>
    </div>
    <div id="side-menu" class="side-nav" >
      <a href="#" class="btn-close" onClick="closeSlideMenu()">&times;</a>
      <a class="main-nav-item-page-index" href="./index.html">Home</a>
      <a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
      <a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
      <a class="main-nav-item-page-index" href="./leather.html">Leather</a>
    </div>
  </header>
  <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

这是我的 javascript 文件：

var hamburgerMenu = document.getElementById('hamburgur-icon');
var slidingMenu = document.getElementById('side-menu');
var navigationBox = document.getElementById('navigation-links');


function hideORShow(){
  if(width > 500){
    console.log("Inside of hideOrShow function - Window width is greater than 500px, hiding hamburger");
    hamburgerMenu.setAttribute("visibility","hidden");
    slidingMenu.setAttribute("visibility","hidden");
  }
  else{
    console.log("Inside of hideOrShow function - Window width is less than 500px, hiding hamburger");
    navigationBox.setAttribute("visibility","hidden");
    hamburgerMenu.setAttribute("visibility","visible");
  }
}

function openSlideMenu(){
  console.log("hamburger btn clicked");
    slidingMenu.setAttribute("visibility","visible");
    slidingMenu.setAttribute("background-color","red");
}

function closeSlideMenu(){
  console.log("close btn clicked");
    slidingMenu.setAttribute("visibility","hidden");
}

我在 chrome 调试器中看到，在事件被触发后可见性属性发生了变化，但我仍然看不到浏览器中的视觉变化。例如，当我单击关闭按钮时，汉堡图标下方的垂直导航栏仍然存在。我会很感激任何提示。

【问题讨论】：

“属性”是一个 DOM 事物 - 元素的属性。 “属性”是 CSS 的东西 - 样式属性。
谢谢 c-smile，我不知道。我不明白为什么这里的人给-1。那么新的学习者应该去问问题呢？
@user1836957 可能是因为你应该在提问之前做一个小研究，你肯定会得到答案。
@Temani 你刚刚给我一个负面的观点吗？如果是，请将其反转，因为现在我有完全无法提问的危险

标签： javascript css html

【解决方案1】：

但问题是当我调用 setAttribute("visibility", "visible") 或 setAttribute("visibility", "hidden") ...

可见性是一种 CSS 样式，而不是元素属性。这就是为什么它不起作用。尝试替换任何如下所示的行：

navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");

与：

navigationBox.style.visibility = "hidden";
hamburgerMenu.style.visibility = "visible";

后者实际上为元素设置了visibility CSS 样式，而前者为元素设置了一个属性（并且作为属性的可见性本身没有任何作用）。

【讨论】：

【解决方案2】：

您要更改的是 CSS 样式，而不是 HTML 属性。有问题的属性是 style 属性，但是在 JS 中有一种简单的方法可以做到这一点：

例如，

slidingMenu.style.visibility = "visible";
slidingMenu.style.backgroundColor = "red";

【讨论】：

好！请批准此答案（或 Crice 的）以结束问题