Question

我正在尝试使用JavaScript根据其值来回设置CSS属性。

类名menu设置为在页面加载时隐藏。当我调用该函数将其设置为可见时，它是成功的。但是，当我再次调用它以将其更改回来时，它不会将其设置为隐藏。它被视为始终可见。

let menu = document.querySelector('.menu');
if (menu.style.visibility = 'hidden') {
  menu.style.visibility = 'visible';
  console.log('visible'); // always shows this.
} else {
  menu.style.visibility = 'hidden';
  console.log('hidden'); // doesn't get to here when .menu is visible.
}

我很困惑为什么它可以做第一个而不是第二个。我尝试过使用else if条件：

else if (menu.style.visibility = 'visible')

我也尝试使用setAttribute方法，但结果总是相同。

我需要能够来回切换。

Answer 1

在JavaScript中使用=为某事物分配一个值但是如果你使用==，你正在检查某些东西是否等于其他东西。

let menu = document.querySelector('.menu');
if (menu.style.visibility == 'hidden') {
  menu.style.visibility = 'visible';
  console.log('visible'); // always shows this.
} else {
  menu.style.visibility = 'hidden';
  console.log('hidden'); // doesn't get to here when .menu is visible.
}

Answer 2

请使用以下条件

params

Answer 3

您的条件无效。您实际上是在if语句中设置值。

if (menu.style.visibility = 'hidden') // this sets the value

应该是这样的：

if (menu.style.visibility == 'hidden') // this compares the value

Answer 4

错误发生在你的if语句中。因此，如果将单个等式更改为双等号：==，则代码应该起作用：

像：

if (menu.style.visibility == 'hidden')

Answer 5

此代码将切换页面上div的可见性。

function togglediv() {
  var div = document.getElementById("menu");
  div.style.display = div.style.display == "none" ? "block" : "none";
}

<button onclick="togglediv('menu')">Toggle div</button>
<div id="menu">div</div>

Answer 6

您的比较语法错误，您需要在比较javascript中的任何字段时使用==，所以只需这样做：

if (menu.style.visibility == 'hidden') {
  menu.style.visibility = 'visible';
  console.log('visible'); // always shows this.
} else {
menu.style.visibility == 'hidden';
console.log('hidden'); // doesn't get to here when .menu is visible.
}

CSS样式不能使用JavaScript恢复

6 个答案: