javascript - 在 Vanilla 中切换风格

Question

是否有任何原生 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'
}

---

---

编辑

Ternary Operator 是我在可读性方面寻找的最接近的。

@GuyWhoKnowsStuff 发送的函数使用了三元运算符，值得分享:

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');
});

感谢您的回答!

Answer 1

试试这个:

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');
});

div {
  padding: 40px;
  background: red;
}

<div>Click Me</div>

或者在您的情况下，如果隐藏了 div 可见性，我认为不会触发点击事件，

参见 CSS: Is a hidden object clickable? ,

所以改为像这样切换不透明度:

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

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

div.addEventListener('mousedown', e => {
  toggleStyle(div, 'opacity', '0', '1');
});

div {
  padding: 40px;
  background: red;
  opacity: 1;
}

<div>Click Me</div>