在javascript中的元素中添加/删除类名之间切换

Question

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.

Answer 1

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 return true .

When a second argument is present: If the second argument evaluates to true , add the specified class value, and if it evaluates to false , 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.