切换样式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>

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

Answer 2

你应该这样写：

function toggleProp(obj, prop, value){
    obj[prop] = obj[prop] ? "" : value; 
}

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

您还应该学习如何使用调试器：

由此我们可以看出，这是因为在使用之前未定义变量display。

Answer 3

两件事：

首先，更改您的style函数，使其直接修改元素的style属性，并使用括号表示法动态访问function toggleStyle(el, styleName, value) { if (el.style[styleName] === '') { el.style[styleName] = value; } else { el.style[styleName] = ''; } } 对象的属性元素：

string

其次，使用toggleStyle时传递toggleStyle(box, "display", "none"); // display needs to be in quotes 样式属性：

yarn-site.xml