javascript - Toggle style in vanilla - Stack Overflow

admin管理员组

文章数量:1394520

Is there any native JavaScript function that allow toggling style (not class) on an element?

So far, I'm using this kind of script:

target.addEventListener('click', (e) => {
    target.classList.toggle('target--is-visible')
}

Following by the style:

target {
    visibility: hidden;

    &--is-visible {
        visibility: visible;
    }
}

And I'd love being allowed to do so:

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 :

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!

Is there any native JavaScript function that allow toggling style (not class) on an element?

So far, I'm using this kind of script:

target.addEventListener('click', (e) => {
    target.classList.toggle('target--is-visible')
}

Following by the style:

target {
    visibility: hidden;

    &--is-visible {
        visibility: visible;
    }
}

And I'd love being allowed to do so:

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 :

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!

• javascript
• html
• css

Share Improve this question Follow edited Oct 11, 2017 at 8:35 Alexis Wollseifen asked Oct 11, 2017 at 8:12 Alexis WollseifenAlexis Wollseifen 46111 gold badge77 silver badges2121 bronze badges 3

• 1 You can try something like target.style.visibility = target.style.visibility == 'visible' ? 'hidden' : 'visible' However toggling a css class is cleaner approach – Satpal Commented Oct 11, 2017 at 8:14
• @Satpal - toggle isn't a style property – Jaromanda X Commented Oct 11, 2017 at 8:14
• Thanks four your ment @Satpal ! It's the kink of easy way I'm looking for. Why isn't it a cleaner approach? In term of readability or performance? – Alexis Wollseifen Commented Oct 11, 2017 at 8:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Try this:

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>

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:

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>

You can also add a prototype like this:

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

and then use like below:

target.toggleVisibility();

It will make it visible and hidden on each invocation.

You could do with ternary operator for toggle

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

本文标签： javascriptToggle style in vanillaStack Overflow