Is there any native JavaScript function that allow toggling style (not class) on an element?
So far, I’m using this kind of script:
<code>target.addEventListener('click', (e) => {
target.classList.toggle('target--is-visible')
}
</code>
<code>target.addEventListener('click', (e) => {
target.classList.toggle('target--is-visible')
}
</code>
target.addEventListener('click', (e) => {
target.classList.toggle('target--is-visible')
}
Following by the style:
<code>target {
visibility: hidden;
&--is-visible {
visibility: visible;
}
}
</code>
<code>target {
visibility: hidden;
&--is-visible {
visibility: visible;
}
}
</code>
target {
visibility: hidden;
&--is-visible {
visibility: visible;
}
}
And I’d love being allowed to do so:
<code>target.addEventListener('click', (e) => {
target.style.toggle.visibility = 'visible'
}
</code>
<code>target.addEventListener('click', (e) => {
target.style.toggle.visibility = 'visible'
}
</code>
target.addEventListener('click', (e) => {
target.style.toggle.visibility = 'visible'
}
EDIT
Ternary Operator is the closest of what I’m looking for in term of readability.
And the function sent by the @GuyWhoKnowsStuff uses ternary operator and deserves to be shared :
<code>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');
});
</code>
<code>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');
});
</code>
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');
});
Thanks for your answers!
3
Try this:
<code>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');
});</code>
<code>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');
});</code>
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');
});<code>div {
padding: 40px;
background: red;
}</code>
<code>div {
padding: 40px;
background: red;
}</code>
div {
padding: 40px;
background: red;
}<code><div>Click Me</div></code>
<code><div>Click Me</div></code>
<div>Click Me</div>or in your case, I do not believe click event fires if the div visibility is hidden,
see CSS: Is a hidden object clickable?,
so instead toggle opacity like so:
<code>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');
});</code>
<code>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');
});</code>
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');
});<code>div {
padding: 40px;
background: red;
opacity: 1;
}</code>
<code>div {
padding: 40px;
background: red;
opacity: 1;
}</code>
div {
padding: 40px;
background: red;
opacity: 1;
}<code><div>Click Me</div></code>
<code><div>Click Me</div></code>
<div>Click Me</div>1
You can also add a prototype like this:
<code>HTMLElement.prototype.toggleVisibility = function()
{
this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible'
}
</code>
<code>HTMLElement.prototype.toggleVisibility = function()
{
this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible'
}
</code>
HTMLElement.prototype.toggleVisibility = function()
{
this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible'
}
and then use like below:
<code>target.toggleVisibility();
</code>
<code>target.toggleVisibility();
</code>
target.toggleVisibility();
It will make it visible and hidden on each invocation.
You could do with ternary operator for toggle
<code>target.addEventListener('click', (e) => {
target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible'
}
</code>
<code>target.addEventListener('click', (e) => {
target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible'
}
</code>
target.addEventListener('click', (e) => {
target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible'
}
0