javascript - 切换样式 Javascript

Question

我正在尝试用 Javascript 编写一个简单的切换函数。它所做的是获取一个元素、一个样式名称和一个所需的值。如果元素上该样式的当前值为空字符串，则表示尚未设置，因此我们将其设置为给定值。否则，将其设置为空字符串以禁用它。

我的代码如下:

function toggleStyle(el, styleName, value) {
  if (el.styleName === '')
  {
    el.styleName = value;
  }
  else
  {
    el.styleName = '';
  }
}

但是，如果我想切换框的可见性，我不确定如何调用此函数。我知道直接更改可见性:我通常会这样做:

var box = document.getElementById("box");
box.style.display = "none";

但是我如何调用我的 toggleStyle 来执行此操作？我试过写:

toggleStyle (box, display, "none");
toggleStyle (box, style.display, "none");
toggleStyle (box.style, display, "none");

但似乎没有任何效果。

Answer 1

括号符号是您需要的，您需要传递字符串。

function toggleStyle(el, styleName, value) {
  if (el.style[styleName] !== value) {  //better to check that it is not the value you have
    el.style[styleName] = value;
  } else {
    el.style[styleName] = '';
  }
}

var btn = document.querySelector("button")
var div = document.querySelector("#foo")
btn.addEventListener("click", function () {
  toggleStyle(div, "display", "none")
});

<button type="button">Click Me</button>
<div id="foo">FOO</div>

这会在哪里失败？颜色代码是一回事，但这是朝着正确方向迈出的基本步骤。