在香草中切换风格

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

谢谢您的回答！

来源

2017-10-11 Alexis Wollseifen

你可以尝试类似'target.style.visibility = target.style.visibility ==''visible'？ 'hidden'：'visible''然而，切换一个css类是更简洁的方法 – Satpal

@Satpal - 切换不是一个样式属性 –

感谢你的评论@Satpal！这是我寻找的简单方法。为什么它不是一个更清洁的方法？在可读性或性能方面？ –

试试这个：

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>

来源

2017-10-11 08:18:05

其实我并没有在寻找切换元素的可见性，但更多的是为了切换风格的一般好方法。三元运算符是最接近的，但您的自定义函数可能非常有用！非常感谢您的回答:) –

我的自定义函数使用三元运算符，并且更灵活... –

您可以用ternary operator做切换

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

来源

2017-10-11 08:15:19 prasanth

感谢@prasanth，我现在正在阅读这个:) –

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

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

，然后使用如下：

target.toggleVisibility();

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

来源

2017-10-11 08:25:36

在香草中切换风格

回答

相关问题