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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

<div>Click Me</div>

＆＃13;

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

请参阅CSS: Is a hidden object clickable?，

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

＆＃13;

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

＆＃13;

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

＆＃13;

<div>Click Me</div>

＆＃13;

Answer 2

您还可以添加这样的原型：

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

然后使用如下：

target.toggleVisibility();

它会使它在每次调用时都可见并隐藏。

Answer 3

您可以使用ternary operator进行切换

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

在香草中切换风格

3 个答案: