HTML/CSS zmiana stylu

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

odpowiedź 18 sierpnia 2022 przez avexperi Początkujący (440 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.

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 (253,340 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 onmouseove i onmouseout, 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>