js如何動態(tài)控制偽元素

比如我希望動態(tài)控制下面的 rotate

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

回答

編輯回答

孤星

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');

2017年4月16日 22:46

編輯回答

伴謊

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

2018年3月25日 04:49

編輯回答

來守候

偽元素不是真的元素，不能通過dom獲取到，所以不能操作，像1l說的，多寫幾個類名，或者用別的標簽替換掉偽元素

2018年8月7日 03:24

編輯回答

薄荷綠

多加類名啊（根據需求 js動態(tài)來添加刪除類名?。?/p>

2017年11月30日 10:14

編輯回答

櫻花霓

嘗試通過添加刪除class來進行操作？

2017年5月23日 23:17

編輯回答

生性

通過控制類來控制變化如果是動態(tài)的需要計算的變化就不要使用偽元素

2017年9月2日 07:28

編輯回答

祈歡

需要幾個狀態(tài)就設定幾個類名，對應切換類名即可

2017年10月23日 04:43

編輯回答

真難過

<!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="http://q.qunarzz.com/open_m_train/prd/scripts/zepto@5f84d4ac791c84f64346aec65b2a0083.js"></script>
</body>
</html>

通過添加css rule試試

2017年2月1日 09:46

編輯回答

來守候