Nie możesz stylizować pseudoklasy tylko na konkretny element, w taki sam sposób, w jaki nie możesz mieć pseudoklasy w atrybucie inline style = "..." (ponieważ nie ma selektora).
Możesz to zrobić zmieniając arkusz stylów, na przykład dodając regułę:
#elid:hover { background: red; }
zakładając, że każdy element, na który chcesz wpłynąć, ma unikalny identyfikator, aby umożliwić jego wybranie.
Teoretycznie dokument, który chcesz, to http://www.w3.org/TR/DOM-Level-2-Style/Overview.html, co oznacza, że możesz (biorąc pod uwagę istniejący osadzony lub połączony arkusz stylów) używając składni takiej jak:
document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';
IE wymaga oczywiście własnej składni:
document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';
Starsze i mniejsze przeglądarki prawdopodobnie nie obsługują żadnej składni. Dynamiczne manipulowanie arkuszami stylów jest rzadko wykonywane, ponieważ jest to dość denerwujące, rzadko potrzebne i kłopotliwe historycznie.
function sameOrigin(url) { var loc = window.location, a = document.createElement('a'); a.href = url; return a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol; }
Stworzyłem do tego małą bibliotekę, ponieważ uważam, że istnieją ważne przypadki użycia do manipulowania arkuszami stylów w JS. Powody są:
źródło
Funkcja radząca sobie z różnymi przeglądarkami:
źródło
Po prostu umieść css w ciągu szablonu.
Następnie utwórz element stylu i umieść ciąg w znaczniku stylu i dołącz go do dokumentu.
Specyfika zajmie się resztą. Następnie możesz dynamicznie usuwać i dodawać tagi stylu. Jest to prosta alternatywa dla bibliotek i mieszania się z tablicą arkuszy stylów w DOM. Miłego kodowania!
źródło
insertAdjacentElement
wymaga 2 argumentów w głównych przeglądarkach (Chrome, Firefox, Edge), z których pierwszy określa pozycję względem elementu referencyjnego ( patrz tutaj ). Czy to ostatnia zmiana? (Dodano „przed końcem” do odpowiedzi).Moja sztuczka polega na użyciu selektora atrybutów. Atrybuty są łatwiejsze do skonfigurowania za pomocą javascript.
css
javascript
html
źródło
Jest inna alternatywa. Zamiast bezpośrednio manipulować pseudoklasami, utwórz prawdziwe klasy, które modelują te same rzeczy, takie jak klasa „najechana” lub „odwiedzona”. Styl zajęć za pomocą zwykłego „.” składni, a następnie możesz użyć JavaScript, aby dodać lub usunąć klasy z elementu, gdy uruchomi się odpowiednie zdarzenie.
źródło
:before
&:after
są pseudoelementami, a nie klasami.Zamiast bezpośrednio ustawiać reguły pseudoklas za pomocą javascript, możesz ustawić reguły inaczej w różnych plikach CSS, a następnie użyć Javascript do wyłączenia jednego arkusza stylów i włączenia innego. Metoda jest opisana w A List Apart (patrz więcej szczegółów).
Skonfiguruj pliki CSS jako,
A następnie przełączaj się między nimi za pomocą javascript:
źródło
Jak już wspomniano, nie jest to obsługiwane przez przeglądarki.
Jeśli nie wymyślasz stylów dynamicznie (tj. Wyciągasz je z bazy danych lub czegoś w tym rodzaju), powinieneś być w stanie obejść ten problem, dodając klasę do treści strony.
CSS wyglądałoby mniej więcej tak:
A javascript do zmiany tego będzie wyglądał następująco:
źródło
element.classList.add
nie jest dobrze obsługiwany? Ciągle widzę, jak ludzie robiąelement.className +=
.Przełączanie i wyłączanie arkuszy stylów to sposób na zrobienie tego. Oto biblioteka do dynamicznego tworzenia arkuszy stylów, dzięki czemu można ustawiać style w locie:
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/
źródło
W jquery możesz łatwo ustawić pseudoklasy hover.
źródło
tutaj jest rozwiązanie zawierające dwie funkcje: addCSSclass dodaje nową klasę css do dokumentu, a toggleClass włącza ją
Przykład pokazuje dodanie niestandardowego paska przewijania do elementu div
źródło
Jeśli używasz REACT, istnieje coś, co nazywa się radem . Jest to tak przydatne tutaj:
źródło