【问题标题】：Giving Class to an element [closed]给元素类[关闭]
【发布时间】：2020-08-26 15:45:52
【问题描述】：

我只想知道如何使用 js 将类添加到容器或任何其他元素

假设我想在scrollY>50 时向<div> 添加一个类，我该怎么做？

编辑：-

我想在scrollY>50 时为元素添加一个类，并在scrollY=0 时删除添加的类

【问题讨论】：

【解决方案1】：

使用element.classList.add() 属性为元素添加类

<div id='mydiv'>

const element = document.querySelector('#mydiv')
element.classList.add('addedClass')

现在将在 scrollY = 50 时添加类，使用 document.onscroll eventListener 和 window.scrollY 获取滚动值

document.onscroll = () => {
  const element = document.querySelector('#mydiv')
  if (window.scrollY == 50) {
    element.classList.add('addMyClass')
  } else {
    element.classList.remove('addMyClass') // remove class if doesnt match the condition
  }
}

querySelector() 方法返回与文档中指定的 CSS 选择器匹配的第一个元素。

classList 属性以 DOMTokenList 对象的形式返回元素的类名。此属性对于在元素上添加、删除和切换 CSS 类很有用。 classList 属性是只读的，但是您可以使用 add() 和 remove() 方法对其进行修改。

参考：https://www.w3schools.com/

【讨论】：

querySelector 和 element.classList.add 是什么，您能提供更多详细信息吗？
我怎样才能让它只在 scrollY 到达特定单元时运行，就像我希望它只在 scrolly=50 时运行我该怎么做
@KrishnaNoutiyal 更新了答案。

【解决方案2】：

如果您的意思是在if (window.scrollY = 50) {} 下添加一个类，那么在这样的解决方案中：

1 这是普通的 js 方法：

if (window.scrollY = 50) {
   document.querySelector('.class_one').classList.add('class_active');
}

2 这是jquery方法：

if (window.scrollY = 50) {
   $('.class_one').addClass('class_active');
}

【讨论】：

你能给我详细介绍一下你的第一种方法吗？我不太了解querySelector和classList.add它们是什么
querySelector() 是一种允许您以任何顺序声明任何选择器的方法。有些方法像 getElementById() 只是一个标识符， getElementsByClassName() 只是一个类， .getElementsByTagName() 只是一个标签名称。在 querySelector() 中，您可以同时指定一个类、一个标识符和一个标签 - querySelector (".сlass #id span")。
有querySelectorAll()这样的方法。您可以在此处阅读更多信息 - coursesweb.net/javascript/…'。
那么classList.add那是什么
classList 属性包含元素的 CSS 类的伪数组，还允许您添加和删除元素的类，检查元素的类中的某个类。 add 是一种添加类的方法。还有方法——remove、toggle。

【解决方案3】：

这应该可行：

document.querySelector("[scrollY=50]").classList.add("myClass")

【讨论】：

你能给我一些关于你在这里做了什么的细节吗？我对js不太了解我是初学者我知道document 是什么，但不知道您在这里使用过的其他东西，例如querySelector 和classList.add