切换香草风格答案

【问题标题】：Toggle style in vanilla切换香草风格
【发布时间】：2018-03-22 19:51:04
【问题描述】：

是否有任何允许在元素上切换样式（而不是类）的原生 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 在可读性方面最接近我所寻找的。p>

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

感谢您的回答！

【问题讨论】：

你可以尝试类似target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible' 但是切换css类是更干净的方法
@Satpal - toggle 不是样式属性
感谢四位您的评论@Satpal！这是我正在寻找的简单方法。为什么不是更清洁的方法？在可读性或性能方面？

标签： javascript html css

【解决方案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;
}

&lt;div&gt;Click Me&lt;/div&gt;

或者在您的情况下，如果 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;
}

&lt;div&gt;Click Me&lt;/div&gt;

【讨论】：

实际上我并不是在寻找切换元素的可见性，而是更多地寻找切换样式的一般好方法。三元运算符是最接近的，但您的自定义函数可能非常有用！所以谢谢你的回答:)

【解决方案2】：

你也可以像这样添加原型：

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

然后像下面这样使用：

target.toggleVisibility();

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

【讨论】：

【解决方案3】：

您可以使用ternary operator 进行切换

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

【讨论】：