JS控制CSS伪元素的方法(上)

本文介绍了一种通过CSS hack方法实现特定样式切换的技术。该方法利用JavaScript动态改变CSS伪元素的样式,适用于希望添加交互效果的高级网页设计场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

声明:此方法由bumfod 同学提供

【HTML部分】

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

【CSS部分】

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

【JavaScript部分】

    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";
        });
    }

最终,你在页面上看到这句话的时候

The seller can, under Business Law 1782, offer a full refund to buyers.

就会出现以下效果:
点击前:
这里写图片描述

点击后:
这里写图片描述

总结:
这是一种相当hack的方法,适合高逼格青年。遍历了所有的css,找到伪元素,然后更改

下篇我们再来说一说普通青年的做法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值