您现在的位置是：网站首页> 编程资料编程资料
CSS使用classList实现两个按钮样式的切换_CSS教程_CSS_网页制作_
2021-09-10
1158人已围观
简介 在一些页面我们需要使用两个按钮来回切换，怎么实现这样的功能呢？下面小编给大家带来了CSS使用classList实现两个按钮样式的切换效果，需要的朋友跟随小编一起学习吧
classList属性的方法：add();remove();toggle();
描述，在一些页面我们需要使用两个按钮来回切换，如图：
我们要使用到add()和remove()方法
html部分:
js部分:
funcction myonclick(){ document.getElementById("mya").classList.remove("newClassName1"); document.getElementById("myaa").classList.remove("newClassName"); } function myonclick1(){ document.getElementById("mya").classList.add("newClassName1"); document.getElementById("myaa").classList.add("newClassName"); }css部分:
.login-title{ width:200px; height:200px; margin: 0 auto; background-color:antiquewhite; } .mya2{ padding: 0 20px 10px 20px; color:#FFFFFF; font-size:22px; text-decoration:none; } .mya1{ padding:0 20px 10px 20px; color:#7F4A88; font-size:22px; text-decoration:none; border-bottom:2px solid #7F4A88; } .newClassName{ padding:0 20px 10px 20px; color:#7F4A88; font-size:22px; text-decoration:none; border-bottom:2px solid #7F4A88; } .newClassName1{ padding: 0 20px 10px 20px; color:#FFFFFF; font-size:22px; text-decoration:none; }
总结
以上所述是小编给大家介绍的CSS使用classList实现两个按钮样式的切换，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
相关内容
- 好的 CSS 命名规范可以节约 Debug 时间_CSS教程_CSS_网页制作_
- CSS语法与JSON、JS对象区别比较_CSS教程_CSS_网页制作_
- 详解CSS的table-layout属性的用法_CSS教程_CSS_网页制作_
- 使用css transition属性实现一个带动画显隐的微信小程序部件_CSS教程_CSS_网页制作_
- 分享20条编写 CSS 代码的建议_CSS教程_CSS_网页制作_
- CSS3截取字符串实例代码【推荐】_css3_CSS_网页制作_
- 浅谈CSS中的百分比_CSS教程_CSS_网页制作_
- 使用CSS3实现环形进度条效果_CSS教程_CSS_网页制作_
- 在Less中写IE的css hack的方法介绍_CSS教程_CSS_网页制作_
- 深入理解css布局之定位与浮动_CSS教程_CSS_网页制作_
