• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyszukiwanie elementu poprzez selektory CSS w DOM

0 głosów
150 wizyt
pytanie zadane 20 czerwca 2018 w JavaScript, jQuery, AJAX przez Paweł Kościelny Początkujący (360 p.)

Witam mam taki oto kod html

<body>

    <ul class="list">
        <li>Element 01</li>
        <li>Element 02</li>
        <li>Element 03</li>
        <li>Element 04</li>
        <li>Element 05</li>
        <li>Element 06</li>
        <li>Element 07</li>
        <li>Element 08</li>
        <li>Element 09</li>
        <li>Element 10</li>
    </ul>

    <script>
        const list = document.querySelector('.list');

        const li = list.querySelectorAll('li');


li[2].style.setProperty("background-color", "red");

Jak napisać kod aby wyświetlało mi elementy tylko z "background color:red"  ?

Póki co działa mi:

console.log(list.querySelector('[style] '));

aczkolwiek nie działa na tylko czerwony

4 odpowiedzi

+5 głosów
odpowiedź 20 czerwca 2018 przez Tomek Sochacki Mędrzec (188,580 p.)

Jak napisać kod aby wyświetlało mi elementy tylko z "background color:red"  ?

A może spróbuj zmienić nieco sposób myślenia o problemie... Potrzebujesz dostać się do elementów, posiadających jakiś tam właściwości CSS, nie ważne jakie - zapominamy o background-color. Elementyjakiś tam właściwościach.

Co nam to zmienia? Otóż wiele, ponieważ teraz możemy sobie sprecyzować czym te elementy się wyróżniają ale nie wizualnie (ponownie - zapominamy o background-color) ale czym się wyróżniają funkcjonalnie. To znaczy, dla przykładu załóżmy, że ten swój czerwony kolor dajesz dla divów wyświetlających jakiś błąd, ostrzeżenie itp. I tutaj mamy wskazówkę - a może by dla tych elementów dać po prostu dodatkową klasę "warning"? 

No dobra, i co nam to z kolei daje?

Otóż teraz mamy zupełnie inny problem. W JS potrzebujmy dostać się do elementów oznaczających jakiś "warning", czyli mogę je pobrać po prostu przez querySelectorAll(".warning") (plus ewentualnie przerobić sobie to na Array w razie potrzeby). Nie interesuje nas jakie to elementy, czy są to LI, czy DIV itp. Interesuje nas jedynie ich znaczenie, które określiliśmy sobie klasą (można też atrybutem data- itp. rozwiązań jest wiele).

A co teraz ze stylami CSS? Można je wrzucić w tę klasę "warning" co pozwoli Ci stworzyć rozwiązanie uniwersalne.

 

I teraz pomyślmy jakie mamy zalety takiego podejścia:

  1. całkowicie odseparowaliśmy rodzaj znaczników html od sposobu dobierania się do nich w JS. Bierzemy elementy po klasie, nie ważne czy są to li, div, p itp. itd. W razie potrzeby ich rozróżniania możemy potem dalej na tej pobranej liście analizować rodzaj elementu, ale wciąż pobieramy je tak samo.
  2. stylowanie mamy w jednym miejscu.
  3. i najważniejsze... nie łączymy stylowania z przeznaczeniem elementu! Nie interesuje nas element z tłem "red" co zakładamy, że jest czymś pokazującym błąd itp. ale interesuje nas element, który funkcjonalnie odpowiada za wyświetlanie warning itp. A to jak jest ostylowany to zupełnie osobna sprawa. Pozwala nam to np. łatwo zmienić rodzaj tła z czerwonego na bordowy i nadal nasz kod działa.

Warto czasem spojrzeć na problem z nieco innej strony :) Kolega raftom dał ciekawy przykład rozbudowanego selektora css ale przemyśl teraz jak takie twory mogą z czasem utrudnić rozwój i utrzymanie aplikacji.

+2 głosów
odpowiedź 20 czerwca 2018 przez pablop76 Szeryf (97,850 p.)
W ten sposób dodajesz style inline. Może lepiej byłoby dodać klasę z kolorem a potem wyszukać elementy z tą klasa i resztę ukryć.

Jeżeli chcesz to zrobić po swojemu  to użyj metody sprawdzającej background i jeżeli nie równa się preferowanej ukryj element

getPropertyValue("background-color");
+1 głos
odpowiedź 20 czerwca 2018 przez raftom Użytkownik (660 p.)
$('ul.list > li[style~="backgroundColor: red;"]')

coś takiego na szybko z JQuery

1
komentarz 20 czerwca 2018 przez Tomek Sochacki Mędrzec (188,580 p.)
o jezu... nie kwestionuję tego czy kod działa (skoro go dałeś to zakładam, że przetestowałeś) ale tak serio... chciałbyś takie coś zobaczyć w kodzie produkcyjnym dostając po kimś w spadku projekt... :) ?
komentarz 21 czerwca 2018 przez raftom Użytkownik (660 p.)

napisałem że to na szybko wymyślone cheeky, dużo lepsze podejście jest z klasą w css na przykład

a tak na poważnie, nie takie rzeczy dostawałem do przeróbki (bo wolno działa)

komentarz 21 czerwca 2018 przez Tomek Sochacki Mędrzec (188,580 p.)

a tak na poważnie, nie takie rzeczy dostawałem do przeróbki (bo wolno działa)

a to to już zupełnie inna bajka... :) Kiedyś miałem stronkę, gdzie same fotki slidera ważyły ponad 15mb, a każda jedna ponad 3mb i dziwienie się dlaczego to się tak wolno ładuje... albo z samego kodu to widywałem już parę razy regexp tak długi, że można by encyklopedię z niego zrobić tylko do analizy rodzaju urządzenia żeby przerzucać między wersją pc i mobilną...

Pomysłowość niektórych ludzi chyba nie zna granic :)

0 głosów
odpowiedź 21 czerwca 2018 przez Paweł Kościelny Początkujący (360 p.)
Dziękuje wszystkim za pomoc, rozumiem podejście w dodaniu dodatkowej klasy i manipulowaniu z pomocą klas, aczkolwiek właśnie chciałem zrobić to o co dokładnie zapytałem, tak po prostu dla własnego treningu. Dzięki jeszcze raz za komentarze i rady :)

Podobne pytania

0 głosów
2 odpowiedzi 94 wizyt
pytanie zadane 27 sierpnia 2018 w JavaScript, jQuery, AJAX przez bulit000 Początkujący (450 p.)
0 głosów
2 odpowiedzi 131 wizyt
0 głosów
1 odpowiedź 52 wizyt
pytanie zadane 6 czerwca w HTML i CSS przez Rozukee Początkujący (300 p.)
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

66,384 zapytań

113,137 odpowiedzi

239,497 komentarzy

46,642 pasjonatów

Przeglądających: 288
Pasjonatów: 5 Gości: 283

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...