使用javascript进行的转换不起作用

Question

所以我试图使用一些简单的JavaScript制作汉堡菜单，事实并非如此。由于某种原因，我的转换翻译不起作用。

我的JavaScript代码：

function hamburger() {
  var x = document.getElementById("links");
  if (x.style.transform === "translateX(0)") {
    x.style.transform === "translateX(100%)";
  } else {
    x.style.transform === "translateX(0)";
  }
}

我的CSS：

#links {
    position: absolute;
    width: 90%;
    overflow: hidden;
    top: 50px;
    right: 0;
    background-color: #dedede;
    min-height: calc(100vh - 50px);
    /*transform: translateX(100%);*/
}

Answer 1

使用x.style，您正在尝试访问内联样式属性，因此您可以切换类名

var x = document.getElementById("links");
function hamburger() {
  x.classList.toggle('translated');
} 


#links {
    position: absolute;
    width: 90%;
    overflow: hidden;
    top: 50px;
    right: 0;
    background-color: #dedede;
    min-height: calc(100vh - 50px);
    transform: translateX(0);
}

#links.translated {
  transform: translateX(100%);
}