切换样式Javascript

我正在尝试用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 (box, display, "none");
toggleStyle (box, style.display, "none");
toggleStyle (box.style, display, "none");

---

但似乎什么都不管用

你应该这样写：

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

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

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

从中我们可以看出，这是因为变量

display

在使用之前没有定义。

有两件事：

首先，更改

toggleStyle

函数，使其直接修改元素的

style

属性，并使用括号表示法动态访问

style

对象的属性元素：

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

第二，当您使用

toggleStyle

时，传递style属性的

string

：

toggleStyle(box, "display", "none"); // display needs to be in quotes

---

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

函数切换样式（el、样式名、值）{
如果（el.style[styleName]！==value）{//最好检查它是否不是您拥有的值
el.style[styleName]=值；
}否则{
el.style[styleName]=''；
}
}
var btn=document.querySelector（“按钮”）
var div=document.querySelector（“#foo”）
btn.addEventListener（“单击”，函数（）{
切换样式（div，“display”，“none”）
});
点击我
FOO
因为您正在寻找变量
display
，对象样式。。。。使用引号和括号符号查看有关设置属性名称为动态的对象属性的问题：
if
条件也应选中
el.style[styleName]
。