如何使用js改变css定义的的伪类的样式_js设置css伪类样式-优快云博客

这篇博客介绍了如何利用JavaScript动态地修改CSS定义的伪类样式。在示例中，当点击充值条数的选项时，如果选择的是'80000条'，原本显示的对勾将替换为打折的折扣数字。通过添加和删除样式标签，实现了在特定条件下内容的动态更新，从而避免静态CSS无法满足的交互需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上面选中的状态我是利用伪类来写的。点击的时候才添加

<div class="recharge-money">充值条数：
   <div class="recharge-money-box">
   <span data-val="5000" class="active">5000条</span>
   <span data-val="10000">10000条</span>
   <span data-val="20000">20000条</span>
   <span data-val="40000">40000条</span>
   <span data-val="60000">60000条</span>
   <span data-val="80000">80000条</span>
   <span data-val="100000">100000条</span>
   <span class="other">自定义条数</span>
   </div>
   <div>充值金额:<h3 class="money">2000</h3>元</div>
</div>

.recharge-money .recharge-money-box span{
           border: 1px #ccc solid;
           padding: 6px 20px;
           border-radius: 3px;
           margin: 0 0 10px 15px;
           cursor: pointer;
           position: relative;
           font-size: 16px;
           width: 90px;
           display: inline-block;
           text-align: center;
           position: relative;
           }
           .recharge-money-box span.active{
               border-color:#FF5722;
           }
           .recharge-money-box span.active:after{
               content:'✔';
               position: absolute;
               right:0;
               bottom:0;
               top: 17px;
           color: #fff;
           border-bottom: 15px solid #FF5722;
           border-left: 6px solid transparent;
           }

$(".recharge-money-box span:not('.other')").click(function(){
var thisText=$(this).text();
$(this).addClass("active").siblings().removeClass("active");

});

按照上面的写法就能实现点击一个方块下面出现一个对勾。

但是如果我们在指定的条数比如，80000条的时候希望下面出现的不是对勾而是，打折的折扣数字。那么就得把 .recharge-money-box span.active:after{ content:'✔';} 改变这个content的内容

我们可以在点击事件里面修改成这样的

$(".recharge-money-box span:not('.other')").click(function(){
var thisText=$(this).text();
$(this).addClass("active").siblings().removeClass("active");

if(thisText=="80000条"){discount='7.5折';}

$(this).siblings().find("style").remove(); //其他添加的style的都先删除
$(this).append('<style>.recharge-money-box span.active:after {content:"'+discount+'";font-size:10px;top:19px}</style>'); //在当前直接append一个样式。为了避免冲突上一句已经清除了添加的样式。

});

我们看浏览器里面其实是这样的