Javascript 切换风格的香草

是否有任何本机JavaScript函数允许在元素上切换样式而不是类

到目前为止，我正在使用这种脚本：

target.addEventListener('click', (e) => {
    target.classList.toggle('target--is-visible')
}

风格如下：

target {
    visibility: hidden;

    &--is-visible {
        visibility: visible;
    }
}

我很乐意被允许这样做：

target.addEventListener('click', (e) => {
    target.style.toggle.visibility = 'visible'
}

编辑

就可读性而言，这是我想要的最接近的

@guywhowknowsstuff发送的函数使用三元运算符，值得共享：

const div = document.querySelector('div');

function toggleStyle(el, prop, style1, style2) {
  el.style[prop] = el.style[prop] === style1 ? style2 : style1;
}

div.addEventListener('click', e => {
  toggleStyle(div, 'background', 'red', 'blue');
});

谢谢你的回答

您可以使用for toggle

target.addEventListener('click', (e) => {
  target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible'
}

你可以用它来切换

target.addEventListener('click', (e) => {
  target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible'
}

试试这个：

const div=document.querySelector'div'； 函数切换STYLEL、prop、style1、style2{ el.style[prop]=el.style[prop]==style1？style2:style1； } div.addEventListener'click'，e=>{ 切换STYLEDIV，‘背景’、‘红色’、‘蓝色’； }; div{ 填充：40px； 背景：红色； } 单击我尝试以下操作：

const div=document.querySelector'div'； 函数切换STYLEL、prop、style1、style2{ el.style[prop]=el.style[prop]==style1？style2:style1； } div.addEventListener'click'，e=>{ 切换STYLEDIV，‘背景’、‘红色’、‘蓝色’； }; div{ 填充：40px； 背景：红色； }

---

单击我您还可以添加如下原型：

HTMLElement.prototype.toggleVisibility = function()
{
    this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible'
}

然后像下面这样使用：

target.toggleVisibility();

---

它将使它在每次调用时可见和隐藏。

您还可以添加如下原型：

HTMLElement.prototype.toggleVisibility = function()
{
    this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible'
}

然后像下面这样使用：

target.toggleVisibility();

---

它将使它在每次调用时可见和隐藏。

您可以尝试类似target.style.visibility=target.style.visibility=='visible'？'隐藏“：“可见”但是切换css类更干净approach@Satpal-toggle不是一个样式属性tanks four your comment@Satpal！这是我正在寻找的一种简单的方式。为什么这不是一个更干净的方法？就可读性或性能而言，您可以尝试类似target.style.visibility=target.style.visibility=='visible'？'隐藏“：“可见”但是切换css类更干净approach@Satpal-toggle不是一个样式属性tanks four your comment@Satpal！这是我正在寻找的一种简单的方式。为什么这不是一个更干净的方法？就可读性或性能而言？事实上，我不是在寻找切换元素可见性的方法，而是寻找切换样式的一般好方法。三元运算符是最接近的运算符，但您的自定义函数可能非常有用！所以，感谢您的回答：实际上，我并不是在寻找切换元素可见性的方法，而是寻找切换样式的一般好方法。三元运算符是最接近的运算符，但您的自定义函数可能非常有用！谢谢你的回答：