为程序猿打造的最专业的问答平台
我要提问

如何用js控制css伪类afterJavascript

浏览4043 | 张学友的哥 发布于 6年前 | | 举报

RT

如何用js控制css伪类after

3个回答
1
jibjab发表于6年前 jibjab

<title>CSS</title>

<style>
    body {
        font: 200%/1.45 charter;
    }
    ref::before {
        content: '\00A7';
        letter-spacing: .1em;
    }
</style>


<article>
 The seller can, under Business Law 
 <ref>
  1782
 </ref>, offer a full refund to buyers. 
</article>

<script>
    function ruleSelector(selector) {
        function uni(selector) {
            return selector.replace(/::/g, ':')
        }
        return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
            return Array.prototype.slice.call(x.cssRules);
        })), function(x) {
            return uni(x.selectorText) === uni(selector);
        });
    }

    var toggle = false, 
        pseudo = ruleSelector("ref::before").slice(-1);

    document.querySelector("article").onclick = function() {
        pseudo.forEach(function(rule) {
            if (toggle = !toggle)
                rule.style.color = "red";
            else
                rule.style.color = "black";
        });
    }
</script>

这样应该可以了吧

0
mrJin发表于6年前 mrJin

为什么不能控制?

<style>
p:after{content:'我是后缀'}
</style>
<p>正文内容</p>

<script>
var css=function(t,s){
    s=document.createElement('style');
    s.innerText=t;
    document.body.appendChild(s);
};

document.onclick=function(){
    css('p:after{content:\'修改一下\'}');
};
</script>

0
jiajiakilong发表于6年前 jiajiakilong

首先after是伪元素,不是伪类。 其次是可以js改变它的样式的,操作思路是js更改style代码,而不是js选中元素再更改样式

我来回答
您当前输入了 0 个文字

擅长用户

jibjab 令狐葱 my 孙晋硕 kkli dabaozi 思倍儿 路俊建 zsc1980 阿木 mrJin 较瘦 i7GTX980 王子亭 张龙manlo bachelor Levine 依云 herostark 我感觉墙撞多了 李振春 那一年 喜剧演员 jianleer Fqujnyq jiajiakilong ooxxPP Snailrider xelz Kavlez 开发陈 SF丶STS nil_461711 kevin 你懂的 haidaozhaoran 夜尽天明19950504 德玛西亚之剑
TOP
登录
登录
记住我
忘记密码?
密码错误
登陆
没有账号?点此注册
举报
胡乱举报将扣除一定问答币或以其他方式进行处罚
辱骂 广告 重复 其他
举报