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

Нужно по средствам 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", но как?
  • Вопрос задан
  • 23712 просмотров
Решения вопроса 1
Alexiuscrow
@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);
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@alvik48
Frontend & Node.js developer
А не проще ли попробовать такой подход:

в css прописать
#icon:before {
    ...
}
#icon.second:before {
    .....
}


и менять у #icon класс на js?
Ответ написан
$('#icon:before').css({
    'content':  "url('../image/search-2.svg')";
});

Так пробовали?
Ответ написан
В 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.
Ответ написан
Комментировать
@misharin
Я реализовал так:

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы