使用 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 中，您试图访问内联样式属性，而不是样式声明中的属性。（您的代码还尝试使用比较运算符进行赋值作为旁注）

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

Javascript

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

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

CSS

#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%);
}

Answer 2

只有在 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)";
  }
}

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

使用 javascript 转换翻译不起作用

transform translate using javascript doesn't work

javascript

css

hamburger-menu