📜  如何在 JavaScript 中切换元素类?

📅  最后修改于: 2021-11-08 06:16:44             🧑  作者: Mango

切换类意味着如果没有为元素分配类名,则可以动态地为其分配类名,或者如果某个类已经存在,则可以仅使用toggle()或使用JavaScript 中 DOMTokenList 对象的contains()、add()、remove()方法。

正在使用的 HTML 元素的属性:

  • classList:此属性返回元素的类名作为 DOMTokenList 对象。这个对象有一些众所周知的方法,包括contains()、add()、remove()、toggle()
  • contains():此方法返回一个布尔值,指示是否存在特定的类名。
  • add():此方法用于向元素添加一个或多个类名。
  • remove():此方法用于从元素中删除一个或多个类名。
  • toggle():该方法属于 DOMTokenList 对象,用于在类之间切换

方法一:使用toggle()方法:我们首先制作一个包含段落标签和按钮标签的HTML文件模板。之后,让我们为要切换的类应用一些样式。在我们的例子中,类名是“paragraphClass”,按钮的ID 是“Button”。将此代码复制到 html 页面的中。


现在,让我们编写用于切换类的脚本。以下是脚本,将编写在 html 页面的中。在这个方法中,我们将使用toggle()函数来切换类名。


示例:让我们通过组合上述所有概念来了解工作示例。




    
    Geeks for Geeks
    
  
    

  

    

        Click on the button to toggle         between the class to see the         effects      

          

输出:

  • 不点击按钮:

  • 单击按钮一次后:

  • 单击按钮两次后:

方法二:通过使用contains(), add()remove()方法:我们首先制作一个包含段落标签和按钮标签的HTML 文件模板。之后,让我们为要切换的类应用一些样式。在我们的例子中,类名是“paragraphClass”,按钮的ID 是“Button”。将此代码复制到 html 页面的中。


现在,让我们编写用于切换类的脚本。以下是脚本,将写入 html 页面的中。在这个方法中,我们将使用contains()、add()、remove()方法来切换类名。这里的技巧是我们将使用contains()方法检查特定类是否存在,然后我们将分别使用add()remove()从元素中添加或删除类名。


示例:让我们通过组合上述所有概念来了解工作示例。




    
    Geeks for Geeks
    
  
    

  

    

        Click on the button to toggle         between the class to see the         effects     

          

输出:

  • 不点击按钮:

  • 单击按钮一次后:

  • 单击按钮两次后: