Heute: SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:JS-window-getcomputedstyle.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>

<html lang="de">
  <head>
    <meta charset="UTF-8"/>
    <title>Hintergrundfarbe auslesen mit getComputedStyle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>

      body {
        max-width: 50em;
        margin: 2em auto;
      }

      button {
        background-color: red;
        padding: 1em 2em;
        border-radius: 0.5em;
      }

    </style>	
    <script>

      function getBackgroundColor (element) {
        return window.getComputedStyle(element).backgroundColor;
      }


      window.addEventListener('DOMContentLoaded', function (event) {
        const button = document.querySelector('button'),
              output = document.querySelector('output');

        button.addEventListener('click', function (event) {
          output.textContent = getBackgroundColor(button);
        });
      });

    </script> 
  </head>
  <body>
     <h1>Auslesen von CSS-Eigenschaften mit getComputedStyle</h1>
     <p>Lesen Sie die Hintergrundfarbe des Buttons aus!</p>
     <button>Los!</button>
     <output></output>
  </body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-window-getcomputedstyle.html&oldid=54201“