Strona w negatywie po kliknięciu obrazka

0

Witam, mam problem: otóż chciałbym aby po kliknięciu obrazka strona zmieniała swoją kolorystykę na negatyw. W CSSie robiłem to filter:invert(100%) i instrukcja była wykonywana podczas wczytywania strony, teraz chciałbym, aby kolory można było zmieniać "w locie". Z JavaScript prawie nie miałem do czynienia, nie wiem nawet czy powinienem to wykonywać w skrypcie czy nie.

0

Utwórz klasę CSS np. inverted, która będzie miała ten filter:invert(100%);, a potem w JS tę klasę ustawiaj/usuwaj.

0

W jaki sposób można w JS wywołać klasę CSS?

1

z użyciem biblioteki jQuery:

$('SELEKTOR ELEMENTU').click(function (e) {
   $(e.target).toggleClass('NAZWA KLASY');
});

https://jsfiddle.net/v2hbgr0v/

albo bez użycia jQuery:

document.querySelectorAll('SELEKTOR ELEMENTU').forEach(function (el)  {
  el.addEventListener('click', function (e) {
	  e.target.classList.toggle('NAZWA KLASY');
  });
});

https://jsfiddle.net/v2hbgr0v/1/

zakładając, że obrazków może być więcej niż 1. Jeśli jeden to można użyć zwykłego document.getElementById zamiast querySelectorAll i forEach

1 użytkowników online, w tym zalogowanych: 0, gości: 1