javascript - 如何用js控制css伪类after-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 如何用js控制css伪类after

大家讲道理 2017-04-10 14:55:24

[JavaScript讨论组]

845

如何用js控制css伪类after

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(6)

怪我咯2017-04-10 14:57:24 6楼

像正常那样拿到伪类这个DOM估计是不大可能了，不过控制的方法也有很多，你可以参考一下。

http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-such-as-before-and-after-using-jquery
http://stackoverflow.com/questions/9798210/is-there-any-way-to-reset-after-before-css-rules-for-an-element

赞 +0

添加回复

PHP中文网2017-04-10 14:57:24 5楼

SO 的答案沒有一個能像操縱普通 DOM 一樣操縱 pseudo element 的樣式。

我做到了。

點擊段落，由腳本切換 Section mark 的顏色：

http://jsfiddle.net/s3fv8e5v/4/

<!DOCTYPE html>
<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

添加回复

迷茫2017-04-10 14:57:24 4楼

为什么不能控制？

<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

添加回复