How to toggle style in JavaScript

Question

I'd like to toggle stylein JavaScript. Not familiar with JavaScript but could I somehow toggle this:

document.body.style.overflow = 'hidden'

It's part of this function:

<a id="mobile-nav" href="#">
  <div class="container1" onclick="myFunction(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</a>

function myFunction(x) {
  x.classList.toggle('change');
  document.body.style.overflow = 'hidden' 
}

I'd like it to apply when I press it, and not apply when I press it again. At the moment it applies when i initiate the function, but doesn't stop applying when I retoggle the function.

DMITRYTISHKIN · Accepted Answer · 2020-05-31 22:36:41Z

2

document.body.style.overflow = document.body.style.overflow ? null : 'hidden';

answered May 31, 2020 at 22:36

DMITRYTISHKIN

5262 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stacksof99 Over a year ago

That would turn it on and off?

DMITRYTISHKIN Over a year ago

Yes, if overflow exist it will be remove, else will set 'hidden'

Stacksof99 Over a year ago

Yep. Brilliant.

Mister Jojo Over a year ago

not brillant, you forget x.classList.toggle('change') return a boolean value, usable to directly set the overflow toggle

Collectives™ on Stack Overflow

How to toggle style in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related