I am working on Toggle between adding and removing class name from an element in Javascript.
Below is the code for that:
const yaxis = xyaxis.querySelector('.y-axis');
yaxis.classList.toggle('y-axis-scroll-bar', .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight);
Problem Statement:
In the above code yaxis.classList.toggle('y-axis-scroll-bar')
seems to add y-axis-scroll-bar on toggle.
I am wondering what this part .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight
of the code is doing above.
When in doubt, check the docs. The second argument to classList.toggle
instructs the intepreter whether to add the class specified in the first argument, or whether to remove it:
toggle( String [, force] )
When only one argument is present: Toggle the class value; ie, if the class exists then remove it and return
false
, if not, then add it and returntrue
.When a second argument is present: If the second argument evaluates to
true
, add the specified class value, and if it evaluates tofalse
, remove it.
So, in your code, when
.35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight
evaluates to true
, the class y-axis-scroll-bar
gets added to the element, if the class doesn't exist on it already - otherwise, if it evaluates to false
, the class is removed if it exists.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.