通过js修改css伪类after，before等样式

最新推荐文章于 2024-12-17 10:07:12 发布

原创最新推荐文章于 2024-12-17 10:07:12 发布 · 7.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

当前文章被收录于：

web前端

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种在无法直接通过JavaScript修改CSS伪类样式的情况下，如何利用新增class及CSS优先级来实现样式更改的方法。

<style>
    .box:before {
        content: "";
        display: block;
        width: 190px;
        position: fixed;
        bottom: 0;
        top: 0;
        z-index: -1;
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        border-width: 0 1px 0 0;
    }
</style>

<div class="box"></div>

实现目的：例如要修改before伪类width为300px;

问题所在：由于伪类（after，before）不能通过js添加行间样式style，所以无法修改伪类样式。

解决方法：在元素上新增class，通过css优先级来实现
1、通过$(“.box”).addClass(“pox”);实现<div class="box pox"></div>
2、在样式表加新增class样式.pox:before{width:300px !improtant;}，通过css优先级实现before修改。

标签

#js修改css伪类 #修改css伪类