• 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

VPS Starter Arubacloud
0 głosów
509 wizyt
pytanie zadane 20 czerwca 2018 w JavaScript 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 Ekspert (227,510 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 VIP (123,060 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 Ekspert (227,510 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 Ekspert (227,510 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 420 wizyt
pytanie zadane 27 sierpnia 2018 w JavaScript przez bulit000 Początkujący (460 p.)
0 głosów
1 odpowiedź 175 wizyt
pytanie zadane 6 czerwca 2019 w HTML i CSS przez Rozukee Początkujący (300 p.)
0 głosów
1 odpowiedź 167 wizyt
pytanie zadane 12 maja 2019 w HTML i CSS przez yato94 Nowicjusz (140 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...