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

<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”);实现


2、在样式表加新增class样式.pox:before{width:300px !improtant;},通过css优先级实现before修改。

你可能感兴趣的:(web前端)