时间:2021-05-08
classList属性的方法:add();remove();toggle();
描述,在一些页面我们需要使用两个按钮来回切换,如图:
我们要使用到add()和remove()方法
html部分:
<div class="login-title"><a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">注册</a><a href="javascript:void(0)" class="mya2" id="myaa" onclick="myonclick1()">登陆</a></div>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实现两个按钮样式的切换,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号
使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔。比如要改变链接颜
本文实例讲述了基于JS实现简单的样式切换效果。分享给大家供大家参考。具体如下:这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元
前言相信大家都知道在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中,我们可以通过状态选择器“: