Как при помощи jQuery поменять контент у псевдоэлемента ::before?

Question

[Alexiuscrow]

Нужно по средствам jQuery поменять картинку в #icon. Как это сделать?
<span id="icon"></span>

#icon::before {
    content: url("../image/search-1.svg");
}

P.S. Пологаю к этому:

$('#icon').css({"content":"url(\"../image/search-2.svg\")"});

нужно прикрутить "::before", но как?

Answer 1

[Alexiuscrow]

Решением послужило добавление нового span-а, в котором через css была прописана вторая картинка. Через jQuery просто меняется css-свойство "opacity" каждого из span-ов.

<span id="icon-1"></span>
<span id="icon-2"></span>

#icon-1 {
	opacity: 1.0;
}
#icon-2 {
	opacity: 0.0;
}
#icon-1::before {
    content: url("../image/search-dark.svg");
}
#icon-2::before {
    content: url("../image/search-light.svg");
}

$('#icon-1').animate({'opacity':'0.0'},400);
$('#icon-2').animate({'opacity':'1.0'},400);

Answer 2

[Aleksandr Kriuchkov]

А не проще ли попробовать такой подход:

в css прописать

#icon:before {
    ...
}
#icon.second:before {
    .....
}

и менять у #icon класс на js?

Comments

[Ilya-Karev]

Зарегистрировался, чтобы написать "спасибо" ))

Answer 3

[Сергей Мекетюк]

$('#icon:before').css({
    'content':  "url('../image/search-2.svg')";
});

Так пробовали?

Comments

[Alexiuscrow]

да

[Сергей Мекетюк]

попробуйте еще $('#icon').prev() - before создает блок для себя и это должно помочь.

[Сергей Мекетюк]

Вот решение на ваш вопрос

[Alexiuscrow]

@SergeiMeketyuk подключал jquery.pseudo.js и использовал конструкцию $('#icon:before').css({ ... }); - не помогает.... не знаю в чём дело.....

Answer 4

[Александр Кит]

В JS к псевдо-элементу не доступиться. Самым правильным вариантом было бы:
<span id='icon' data-src='../image.png'></span>
#icon { content: url(data-src); /* ... */ }
$('#icon').data('../baz.png');

Или через классы менять `content`.

Если же "очень нужно" через javascript, тогда или

$('style').text('#icon:before { content: url(baz.png); }').appendTo('body')

... или выискивать стиль в `document.styleSheets` и там изменять content.

Answer 5

[misharin]

Я реализовал так:

1. Добавил новый класс в CSS, где, например
.className:before {content: "/20BC";}
2. Затем в JS нужному элементу добавил новый класс
$(elementName).addClass('className');
3. И чтобы вернуть к первоначальному виду
$(elementname).removeClass('className');