Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS] Ukrywanie pseudoelementu za pomocą JS
Forum PHP.pl > Forum > Przedszkole
stellatus
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.
trueblue
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.
stellatus
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
trueblue
closest ma zastąpić kombinację parentNode.parentNode
Przeczytaj w manual jakie elementy znajduje closest.
stellatus
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?
trueblue
Nieprawda.
closest znajduje poprzednika (lub ten sam element) na podstawie selektora.
<time> nie jest poprzednikiem elementu <a>.

  1. x[i].closest("p.g1-meta").querySelector("time")


"hidden-before::before" to nie jest poprawna klasa.
stellatus
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



trueblue
Wspominałem, że to nie jest poprawna klasa.
Dlaczego to nazwy klasy dodajesz nazwę elementu?
stellatus
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!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.