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

所以我试图用一些简单的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%);*/
}

使用x.style，您试图访问内联样式属性，而不是样式声明中的属性。您的代码还尝试使用比较运算符作为旁注进行赋值

您可以更轻松地切换类名：

Javascript

// cache a reference to the #links element
var x = document.getElementById("links");

function hamburger() {
  x.classList.toggle('translated');
} 

CSS

仅在if条件===被允许的情况下，并且在您的代码中，在if{…}中有它 因此，请尝试将代码更改为

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

---

注意：=用于赋值，==用于检查条件。

与其使用脆弱的内联样式，不如切换类，如.open。JavaScript处理类，CSS文件处理样式。如果您还想添加第二种样式（如不透明度），则更易于维护！x、 style.transform===translateX100%；比较不是赋值这是x.style.transform===translateX100%；if语句中的输入错误？

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