jquery实现点击按钮添加和移除class

 时间:2026-02-13 08:24:51

1、新建一个html文件,命名为test.html,用于讲解jquery实现点击按钮添加和移除class。

jquery实现点击按钮添加和移除class

2、在test.html文件内,使用p标签创建一行文字,下面将使用jquery方法给它添加class。

jquery实现点击按钮添加和移除class

3、为了展示效果,使用css设置一个类名mytest的样式,设置内边距为10px,背景颜色为黄色。

jquery实现点击按钮添加和移除class

4、在test.html文件内,使用button标签创建两个按钮,一个为添加class按钮,另一个为删除class按钮。

jquery实现点击按钮添加和移除class

5、在test.html文件内,给两个按钮分别绑定onclick事件,当按钮被点击,分别执行addcss()函数,delcss()函数。

jquery实现点击按钮添加和移除class

6、在js标签内,分别创建addcss()函数和delcss()函数,在addcss()函数内,通过获得p标签对象,使用addClass()方法给p元素添加mytest类名属性,在delcss()函数内,使用removeClass()方法删除mytest类名属性。

jquery实现点击按钮添加和移除class

7、在浏览器打开test.html文件,分别点击按钮,查看实现的效果。

jquery实现点击按钮添加和移除class

jquery实现点击按钮添加和移除class

jquery实现点击按钮添加和移除class

1、创建一个test.html文件。

2、在文件内,使用p标签创建一行文字,使用button标签创建两个按钮,一个为添加class按钮,另一个为删除class按钮。

3、两个按钮分别绑定onclick事件,当按钮被点击,分别执行addcss()函数,delcss()函数。

4、在js标签内,分别创建addcss()函数和delcss()函数,在addcss()函数内,通过获得p标签对象,使用addClass()方法给p元素添加类名属性,在delcss()函数内,使用removeClass()方法删除类名属性。

  • 如何在js里设置元素为浮动属性
  • npm代理如何设置npm网络链接失败如何设置
  • Intellij idea 中的Darcula主题怎么把颜色改回来
  • intellij idea如何关闭显示工具窗口栏
  • Notepad++打开编辑器如何显示行号栏
  • 热门搜索
    什么叫脱发 孕前检查什么时候做 推杯换盏的意思 海市蜃楼是什么意思 什么俯首甘为孺子牛 草木皆兵是什么意思 词类活用是什么意思 了如指掌的意思 牛百叶是牛的什么部位 ben是什么意思