Как редактировать псевдо-классы веб-страницы, используя Javascript? - PullRequest
0 голосов
/ 24 октября 2019

Я пытаюсь создать расширение для 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). Я не получаю никаких результатов от того, что я пробовал, но я чувствую, что моя логика верна. Все, что я хочу сделать для расширения, это автоматизировать процесс использования "Inspect Element" для редактирования страницы.

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

Изображения на странице должны быть без размытия, но ничего не происходит. Возможно, мое расширение не настроено должным образом, поскольку я только начал изучать этот материал, но я надеялся, что кто-то еще с большим опытом сможет сказать мне, в порядке ли мой код.

1 Ответ

0 голосов
/ 24 октября 2019

Попробуйте это:

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

Проблема с вашим текущим подходом состоит в том, что и classList.remove(..), и classList.add(..) ожидают один параметр, строку, представляющую одно имя класса, или несколько параметров строки, представляющих один класс. имена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...