Question

我正在尝试创建一个Chrome扩展程序，以“取消模糊处理”网页上的一系列图像。我对这一切都很陌生，我只想知道自己是否走在正确的轨道上。

根据我所看到的，每个图像都包含在一个标签中，如下所示：

<div class="Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a">

为了使图片不模糊，必须将Blur（12px）伪类更改为Blur（0px）。我的尝试没有得到任何结果，但是我觉得我的逻辑似乎是正确的。我想要扩展程序要做的就是自动化使用“检查元素”编辑页面的过程。

var profilePic = document.getElementsByClassName("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a");
    for(var i = 0; i < profilePic.length(); i++) {
        profilePic[i].classList.remove("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a");
        profilePic[i].classList.add("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.0)::a Scale(1.0)::a--s Blur(0px)::a");
    }

页面上的图像应该不模糊，但是什么也没有发生。自从我刚开始研究扩展程序以来，我可能没有正确设置扩展程序，但是我希望其他有更多经验的人可以告诉我我的代码是否还可以。

Answer 1

尝试一下：

[...document.getElementsByClassName('Blur(12px)::a')]
.forEach(e => e.classList.replace('Blur(12px)::a', 'Blur(0px)::a'));

当前方法的问题是classList.remove(..)和classList.add(..)都期望有一个参数，一个字符串代表一个类名，或者多个字符串参数代表一个类名。

如何使用Javascript编辑网页的伪类？

1 个答案: