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

HTML/CSS zmiana stylu

VPS Starter Arubacloud
+2 głosów
585 wizyt
pytanie zadane 11 sierpnia 2022 w HTML i CSS przez oskar3140 Nowicjusz (170 p.)
Hej

 

Mam szybkie pytanku.

Czy mogę zrobić zmieniające się tło/kolory ogólnie style pod przyciskami w HTMLu bez użycia JavaScript?

Chodzi konkretnie o ułatwienia dla osób niepełnosprawnych jak zmiana rozmiaru czcionki czy kontrastu strony.

2 odpowiedzi

+1 głos
odpowiedź 18 sierpnia 2022 przez avexperi Początkujący (400 p.)

Jeżeli chcesz zmieniać style css na kliknięcie czysto w css,

polecam pobawić się w input checkbox albo input radio.

Po odpowiednim umiejscowieniu inputów w html i zaadresowaniu ich w css można pisać style css dla jakiegokolwiek elementu na stronie, kiedy input jest zaznaczony.

Oczywiście sam input można ustawić niewidoczny, a podpięty do niego label wystylizować na przycisk.

Wtedy w css pisze się style dla jakiego się chce elementu na stronie np.

#mojinput:checked ~ .mojkontener .mojelement {
style css
}

input id="mojinput" musi się wtedy znajdować na tym samym poziomie co <div class="mojkontener">.

Element o klasie .mojelement którego chcemy stylizować po kliknięciu powinien znajdować się gdziekolwiek byle wewnątrz <div class="mojkontener">.

Label (czyli nasz przycisk) połączony z inputem może znajdować się gdziekolwiek na stronie, ważne, żeby input znajdował się w odpowiednim miejscu.

Jeżeli chcemy ominąć <div class="mojkontener"> i zaadresować w css .mojelement bez kontenera trzeba ustawić input na tym samym poziomie co dany element, przed nim. Jednak z doświadczenia wiem, że ta pierwsza metoda jest dużo bardziej praktyczna, i na jedno kliknięcie można zmieniać mnóstwo elementów na stronie, a na drugie kliknięcie cofnąć wszystkie zmiany. Radio input dodaje jeszcze więcej możliwości.

0 głosów
odpowiedź 11 sierpnia 2022 przez rafal.budzis Szeryf (85,260 p.)

Tak. Możesz wykorzystać selektor :target który pozwala zmieniać style dla aktywnej kotwicy. Jeśli nie używasz kotwic do nawigacji po stronie zadziała ;) 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --bgColor: black;
        }

        .kwadrat {
            width: 200px;
            height: 200px;
            background: var(--bgColor);
        }

        #red:target {
            --bgColor: red;
        }

        #blue:target {
            --bgColor: blue;
        }

        #green:target {
            --bgColor: green;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="blue">
            <div id="green">

                <div>
                    <a href="#red"> red</a>
                    <a href="#blue"> blue</a>
                    <a href="#green"> green</a>
                </div>

                <div class="kwadrat" />
            </div>
        </div>
    </div>
</body>
</html>

Jednak nie ma co się bać JSa. Wystarczy że w javascript nauczyć się dodawać klasy CSSowe. Skrypt powinien być prosty.

komentarz 11 sierpnia 2022 przez oskar3140 Nowicjusz (170 p.)

Znalazłem coś takiego, jednak kiedy próbuję dodać drugą chmurkę cały


<html>
    <head>
        <title>Tooltip - przykład</title>
        <script type="text/javascript">
            function showTip(oEvent) {
                var oDiv = document.getElementById("divTip1");
                oDiv.style.visibility = "visible";
                oDiv.style.left = oEvent.clientX + 5;
                oDiv.style.top = oEvent.clientY + 5;
            }

            function hideTip(oEvent) {
                var oDiv = document.getElementById("divTip1");
                oDiv.style.visibility = "hidden";
            }
        </script>
    </head>
    <body>
        <p>Umieść kursor myszy na czerwonym kwadracie.</p>
        <div id="div"
             style="background-color: red; height: 50px; width: 50px"
             onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>

         <div id="divTip1"
              style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
            <span style="font-weight: bold">Własna podpowiedź</span><br />
            W tym miejscu można umieścić bardziej szczegółowe informacje.2
         </div>
                 <p>Umieść kursor myszy na czerwonym kwadracie.</p>
        <div id="div"
             style="background-color: red; height: 50px; width: 50px"
             onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>

         <div id="divTip1"
              style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
            <span style="font-weight: bold">Własna podpowiedź</span><br />
            W tym miejscu można umieścić bardziej szczegółowe informacje3.
         </div>
    </body>
</html>

czas nadpisuje się ta jedna.

komentarz 11 sierpnia 2022 przez VBService Ekspert (251,170 p.)
edycja 11 sierpnia 2022 przez VBService

W dokumencie atrybut id musi być niepowtarzalny dla każdego elementu html.

A Ty zapisałeś dwa razy

<div id="divTip1" ... > 1 raz

...


<div id="divTip1" ... > 2 raz

no i w kodzie javascript "odwołujesz" się tylko do elementu

//              <div id="divTip1" ... >
document.getElementById("divTip1");

 możesz funkcję showTip uczynić bardziej uniwersalną,

wiemy, że w kodzie div z toolTip występuje zaraz po div-ie gdzie "ustawione" są zdarzenia onmouseoveonmouseout, zatem możemy użyć np. element.nextElementSibling

 

sprawdź  [ on-line ]

          function showTip(oEvent) {
            const oDiv = oEvent.target.nextElementSibling;
            oDiv.style.visibility = "visible";
            oDiv.style.left = oEvent.clientX + 5;
            oDiv.style.top = oEvent.clientY + 5;
          }

          function hideTip(oEvent) {
            const oDiv = oEvent.target.nextElementSibling;
            oDiv.style.visibility = "hidden";
          }
    <p>Umieść kursor myszy na czerwonym kwadracie.</p>
    <div
         style="background-color: red; height: 50px; width: 50px"
         onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>

    <div
         style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
      <span style="font-weight: bold">Własna podpowiedź</span><br />
      W tym miejscu można umieścić bardziej szczegółowe informacje 1.
    </div>

    <p>Umieść kursor myszy na czerwonym kwadracie.</p>
    <div
         style="background-color: red; height: 50px; width: 50px"
         onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>

    <div
         style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
      <span style="font-weight: bold">Własna podpowiedź</span><br />
      W tym miejscu można umieścić bardziej szczegółowe informacje 2.
    </div>

    <p>Umieść kursor myszy na zielonym kwadracie.</p>
    <div
         style="background-color: green; height: 50px; width: 50px"
         onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>

    <div
         style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
      <span style="font-weight: bold">Własna podpowiedź</span><br />
      W tym miejscu można umieścić bardziej szczegółowe informacje 3.
    </div>

 

Podobne pytania

0 głosów
1 odpowiedź 121 wizyt
pytanie zadane 5 grudnia 2018 w HTML i CSS przez Bartloica Nowicjusz (240 p.)
0 głosów
0 odpowiedzi 383 wizyt
pytanie zadane 6 września 2018 w HTML i CSS przez Dawid_Predecki Obywatel (1,610 p.)
0 głosów
1 odpowiedź 917 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...