在 adding/removing class 来自 javascript 中元素的名称之间切换

Question

我正在研究在 Javascript 的元素中添加和删除 class 名称之间的切换。

下面是代码：

const yaxis = xyaxis.querySelector('.y-axis');   

yaxis.classList.toggle('y-axis-scroll-bar', .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight);

问题陈述：

在上面的代码中 yaxis.classList.toggle('y-axis-scroll-bar') 似乎在切换时添加了 y 轴滚动条。

我想知道这部分 .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight 上面的代码在做什么。

Answer 1

如有疑问，请查看文档。 classList.toggle的第二个参数instructs the intepreter是否添加第一个参数中指定的class，或者是否删除它：

toggle( String [, force] )
When only one argument is present: Toggle the class value; i.e., 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.

因此，在您的代码中，当

.35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight

计算为 true，如果 class 不存在，则 class y-axis-scroll-bar 被添加到元素中 - 否则，如果它计算到 false，如果 class 存在，则将其删除。

在 adding/removing class 来自 javascript 中元素的名称之间切换

Toggle between adding/removing class name from an element in javascript

javascript

toggle