[JavaScript][CSS] Ukrywanie pseudoelementu za pomocą JS |
[JavaScript][CSS] Ukrywanie pseudoelementu za pomocą JS |
22.02.2020, 10:54:35
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Kod <div> <p class="g1-meta entry-meta entry-byline entry-byline-with-avatar"> <span class="entry-author"> <span class="entry-meta-label">von</span> <a href="#" title="Posts by Roman" rel="author"> <img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS6001cC2ejbwzQndTn-VX7NCmhWbom3WH5TDdzhFHeotIhLKZV" class="avatar avatar-30 photo" width="30" height="30" /> <strong>Roman</strong> </a> </span> <time class="entry-date" datetime="2020-02-19T19:14:24" title="Feber 19, 2020, 7:14 pm" >vor 3 Tagen</time > </p> </div> <div> <p class="g1-meta entry-meta entry-byline entry-byline-with-avatar"> <span class="entry-author"> <span class="entry-meta-label">von</span> <a href="#" title="Posts by Hidden" rel="author"> <img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS6001cC2ejbwzQndTn-VX7NCmhWbom3WH5TDdzhFHeotIhLKZV" class="avatar avatar-30 photo" width="30" height="30" /> <strong>Hidden</strong> </a> </span> <time class="entry-date" datetime="2020-02-19T19:14:24" title="Feber 19, 2020, 7:14 pm" >vor 3 Tagen</time > </p> </div> <div> <p class="g1-meta entry-meta entry-byline entry-byline-with-avatar"> <span class="entry-author"> <span class="entry-meta-label">von</span> <a href="#" title="Posts by Krycha" rel="author"> <img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS6001cC2ejbwzQndTn-VX7NCmhWbom3WH5TDdzhFHeotIhLKZV" class="avatar avatar-30 photo" width="30" height="30" /> <strong>Krycha</strong> </a> </span> <time class="entry-date" datetime="2020-02-19T19:14:24" title="Feber 19, 2020, 7:14 pm" >vor 3 Tagen</time > </p> </div> Kod .entry-byline .entry-date::before { display: inline-block; width: 3px; height: 3px; margin-right: 8px; vertical-align: middle; border-radius: 50%; content: ""; background: currentColor; } Kod function hideSelectedTimeBefore() { var x = document.querySelectorAll('a[title="Posts by Hidden"]'); var i; for (i = 0; i < x.length; i++) { x[i].parentNode.parentNode.querySelector('time.entry-date').style.display = "none"; } } hideSelectedTimeBefore() https://codepen.io/rudolph-reti/pen/XWbNVGM Przy autorze "Hidden", chciałbym ukryć tylko kropkę (pojawiającą się za nazwą autora), która jest pseudoelementem. Wiem jak ukryć element <time>, w której siedzi pseudoelement "::before", co pokazałem w załączonym kodzie, ale nie wiem jak usunąć sam pseudoelement. |
|
|
22.02.2020, 11:14:11
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Po prostu dodaj klasę do elementu <time>.
I wtedy: Kod time.hidden-before::before{ display: none; } Zamiast tej dziwnej konstrukcji parentNode.parentNode użyj po prostu closest. -------------------- |
|
|
22.02.2020, 11:59:40
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki. Na początek chciałem tylko zlokalizować <time> za pomocą "closet" i już na tym etapie coś robię źle, bo wyskakuje błąd: http://srv19859.microhost.com.pl/2020-02-22_11h52_09.jpg
|
|
|
22.02.2020, 12:01:53
Post
#4
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
closest ma zastąpić kombinację parentNode.parentNode
Przeczytaj w manual jakie elementy znajduje closest. -------------------- |
|
|
22.02.2020, 12:20:41
Post
#5
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Tutaj są różne przykłady:
Kod var el = document.getElementById('div-03'); var r1 = el.closest("#div-02"); // returns the element with the id=div-02 var r2 = el.closest("div div"); // returns the closest ancestor which is a div in div, here it is the div-03 itself var r3 = el.closest("article > div"); // returns the closest ancestor which is a div and has a parent article, here it is the div-01 var r4 = el.closest(":not(div)"); // returns the closest ancestor which is not a div, here it is the outmost article Więc <time> powinno zostać też odnalezione. Skoro "closest" miałoby zastąpić "parentNode.parentNode" i do <time> miałaby być dodana klasa "hidden-before" z ::before to rozumiem, że powinienem zadeklarować tę klasę w CSS i w JS napisać: Kod x[i].closest("time").classList.add("hidden-before::before"); (https://codepen.io/rudolph-reti/pen/RwPoQqw) ale to oczywiście nie działa. Mógłbyś mi powiedzieć dlaczego? Ten post edytował stellatus 22.02.2020, 12:21:04 |
|
|
22.02.2020, 12:25:47
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Nieprawda.
closest znajduje poprzednika (lub ten sam element) na podstawie selektora. <time> nie jest poprzednikiem elementu <a>.
"hidden-before::before" to nie jest poprawna klasa. -------------------- |
|
|
22.02.2020, 12:56:29
Post
#7
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki.
Cytat "hidden-before::before" to nie jest poprawna klasa. Jeżeli nie tak: Kod x[i].closest("p.g1-meta").querySelector("time").classList.add("hidden-before::before"); to jak dodać klasę z ::before do tego <time>? https://codepen.io/rudolph-reti/pen/RwPoQqw Ten post edytował stellatus 22.02.2020, 13:10:33 |
|
|
22.02.2020, 13:07:49
Post
#8
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Wspominałem, że to nie jest poprawna klasa.
Dlaczego to nazwy klasy dodajesz nazwę elementu? -------------------- |
|
|
22.02.2020, 13:31:59
Post
#9
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Sorry, nie rozumiałem jak działają te pseudoelementy. Prejrzałem teraz to: https://www.w3schools.com/CSS/tryit.asp?fil...e=trycss_before Z tego wynika, że muszę do <time> dodać po prostu klasę: "hidden-before", do której już został przypisany ::before. Zrobiłem tak:
Kod x[i].closest("p.g1-meta").querySelector("time").classList.add("hidden-before"); Kod .hidden-before::before{ display: none !important; } https://codepen.io/rudolph-reti/pen/RwPoQqw I działa. Dzięki bardzo! |
|
|
Wersja Lo-Fi | Aktualny czas: 20.04.2024 - 02:47 |