js如何动态控制伪元素

发布于
2018-02-24

比如我希望动态控制下面的 rotate

           &:after {
                content: '';
                width: 100%; 
                height: 100%;
                position: absolute;
                transform: rotate(30deg);
                border-radius: 50%;
            }

javascript css3

阅读 5.9k

9 个回答

得票最新

hfhan

29k72241

发布于
2018-02-24

伪元素不是真的元素，不能通过dom获取到，所以不能操作，像1l说的，多写几个类名，或者用别的标签替换掉伪元素

js 修改伪元素属性的方法：

css

.left-up-ico::before {
    background: rgba(30, 136, 255, 1);
}

html

<div class="left-up-ico"></div>

 document.styleSheets[0].addRule('.left-up-ico::before ','background: rgb(165, 165, 165) !important');

雀十三

发布于
2018-02-24

需要几个状态就设定几个类名，对应切换类名即可

ntnyq

1.2k2822

发布于
2018-02-27

通过控制类来控制变化如果是动态的需要计算的变化就不要使用伪元素

月影

2.7k1726

发布于
2018-02-27

不知道你的需求是什么?
我想到transition
transition

zzgzzg00

3.7k21420

发布于
2018-02-27

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        div:after{
            content:'just test 1';
        }
    </style>
    <style>
        .custom_edit_style{

        }
    </style>
</head>
<body>
<div></div>
<input type="button" value="change" />
<script>
    function findCustomEditStyle(selector='.custom_edit_style'){
        const styles=document.styleSheets;
        for(let i=0;i<styles.length;i++){
            try{
                const style=styles[i];
                if(style.cssRules[0].selectorText==selector){
                    return style;
                }
            }catch(e){
                continue;
            }
        }
        return undefined;
    }
    function addRules(selector,rules){
        var style=findCustomEditStyle();
        if(!style){
            return false;
        }
        var index=style.cssRules.length;
        style.addRule(selector,rules,index);
    }
    var index=2;
    document.querySelector('input').onclick=function(){
        addRules('div:after','content:"just test '+(index++)+'";');
    }
</script>
<script src="//q.qunarzz.com/open_m_train/prd/scripts/zepto@5f84d4ac791c84f64346aec65b2a0083.js"></script>
</body>
</html>

通过添加css rule试试