Zadaj pytanie

[HTML+JavaScript] Zmiana koloru tła na stronie

pytanie zadane 20 kwietnia 2022 w Programowanie przez użytkownika
edycja 12 maja 2022 przez użytkownika

1 odpowiedź

odpowiedź 20 kwietnia 2022 przez użytkownika
edycja 12 maja 2022 przez użytkownika

Czasami pojawia się na stronach www możliwość zmiany tła (podświetlenia), całej witryny na inne niż standardowe. Może się to przydać, żeby zmienić kontrast strony na dostosowany dla osób niepełnosprawnych lub przestawienie wyglądu witryny z dziennej na nocną.

Można to spokojnie zrobić w kodzie za pomocą HTML + JavaScript. Tutaj przykładowy skrypt:

<html>
<head>
</head>
<body>
<form>
<table cellspacing=0 cellpadding=0 style="border:3px solid black">
<tr>
<td>
<input type=radio name=bg style="background-color:green" onclick="document.bgColor=this.style.backgroundColor" checked>
</td>
<td>
<input type=radio name=bg style="background-color:black" onclick="document.bgColor=this.style.backgroundColor">
</td>
<td>
<input type=radio name=bg style="background-color:red" onclick="document.bgColor=this.style.backgroundColor">
</td>
<td>
<input type=radio name=bg style="background-color:gray" onclick="document.bgColor=this.style.backgroundColor">
</td>
</tr></table>
</form>
</body>
</html>

Tak to wygląda po wczytaniu strony:

zmiana koloru tła w html

Opcja wyboru kolorów na powyższym listingu realizowana jest za pomocą radio, czyli zaznaczanie kropką danego kółeczka.

W przykładzie po uruchomieniu skryptu, wyświetla się domyślny ustawiony kolor tła (ten w style.css). Natomiast po wybraniu jednej z czterech dostępnych opcji zmienia się kolor, na wcześniej zdefiniowany.

komentarz 13 maja 2022 przez użytkownika Gość

Używając <label> i css: display możesz ukryć radio button'y.  smiley

I przypisując klasy, możesz zmieniać więcej atrybutów css'owych dla elementów.

<!DOCTYPE html>
<html lang="pl-PL">
  <head>
    <meta charset="UTF-8" />

    <style>
      * {
        box-sizing: border-box;
      }
      :root {
        --body-color-chooser-box-width: 2em; /* szerokość kafelka <li> */
        --body-color-chooser-box-padding: 0.1em; /* odstęp między kafelkami <li> */
        --body-color-chooser-box-count: 5; /* ile kafelków <li> w <ul> o id = "body-color-chooser" */
        --body-font-color: black;
      }
      html, 
      body {
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: white;
        color: var(--body-font-color, black);
        transition: background-color 0.25s;
      }
      p {
        margin: 1em;
      }
      ul#body-color-chooser {
        margin: 1em;
        padding: 0;
        width: calc(var(--body-color-chooser-box-count) * (var(--body-color-chooser-box-width) + (var(--body-color-chooser-box-padding) * var(--body-color-chooser-box-count))));
      }
      ul#body-color-chooser li { 
        display: inline-block;
        list-style-type: none;
        padding: var(--body-color-chooser-box-padding);
        width: var(--body-color-chooser-box-width);
        height: 2em;     
      }
      ul#body-color-chooser input[type="radio"] {
        display: none;
      }
      ul#body-color-chooser input:checked + label {
        box-shadow: 0 0 2px 2px gray;
        border-radius: 50%;
      }      
      ul#body-color-chooser label {
        display: block;
        width: 100%;
        height: 100%;        
        cursor: pointer;
        transition: all 0.25s;
      }
      ul#body-color-chooser label:hover {
        transform: scale(1.1);
      }      
      .green { 
        background-color: green;
      }
      .red {
        background-color: red;
      }
      .yellow {
        background-color: yellow;        
      }
      .black {
        background-color: black;
        --body-font-color: white;
      }
      .orange {
        background-color: orange;
      }      
    </style>
  </head>
  <body>
    <ul id="body-color-chooser">
      <li>
        <input type="radio" id="bg1" name="bg" />
        <label for="bg1" class="green"></label>
      </li>
      <li>
        <input type="radio" id="bg2" name="bg" />
        <label for="bg2" class="red"></label>
      </li>
      <li>
        <input type="radio" id="bg3" name="bg" />
        <label for="bg3" class="yellow"></label>
      </li>
      <li>
        <input type="radio" id="bg4" name="bg" />
        <label for="bg4" class="black"></label>
      </li> 
      <li>
        <input type="radio" id="bg5" name="bg" />
        <label for="bg5" class="orange"></label>
      </li>      
    </ul>

    <p>Lorem ipsum ...</p>
    
    <script>
      window.onload = load;

      function load() {
        const body_color_chooser = document.querySelector('#body-color-chooser');
        body_color_chooser.onclick = bodyColor;

        function bodyColor(e) {
          if (e.target.nodeName == 'LABEL') {
            document.body.classList.remove(document.body.dataset.currentColor || null);
            document.body.classList.add(e.target.className);
            document.body.dataset.currentColor = e.target.className;
          }
        }       
      }
    </script>
  </body>
</html>

powyższy przykład on-line.

pytania i odpowiedzi
kz1.pl
...