V6_JavaScriptDOMCSS

The One Language to Rule Them All

JavaScript kann auf das DOM zugreifen, das haben wir gesehen. Aber es kann vielmehr, es kann CSS Eigenschaften verändern, Elemente löschen, erzeugen, Werte auslesen.

Ein Beispiel

Mit JavaScript Attribute eines Elements verändern: Erstelle im HTML ein Element mit der ID #element und style es über CSS. Positioniere es absolut.

<button id="buttonclick" class="specialbutton">Click mich!</button>
<div id="element"></div>

position: absolute;
top: 200px;
left: 0px;

//Event Handling
let btn = document.getElementById("buttonclick");
btn.addEventListener("click", buttonPressed);

//Aktion
let n = 0; 
function buttonPressed() {
    n++;
    document.getElementById("element").style.left = n + "px";
}

Du greifst nun über die DOM Schnittstelle auf das Attribut left zu.
W3C, Zugriff auf Style Properties: https://www.w3schools.com/jsref/prop_style_aligncontent.asp

Ein zweites Beispiel

Elemente mit JavaScript erzeugen:

<button id="buttonclick" class="specialbutton" >Erzeuge Element!</button>

//Event Handling
let btn = document.getElementById("buttonclick");
btn.addEventListener("click", neuesElement);

function neuesElement() {
    let div = document.createElement("div");
    div.classList.add('random');
    div.style.left = Math.random() * window.innerWidth + "px";
    div.style.top = Math.random() * window.innerHeight + "px";
    document.body.appendChild(div);
}

W3C Examples hier: https://www.w3schools.com/js/js_htmldom_nodes.asp

Wir werden nun einen CSS Stil über JavaScript (JS) verändern. Dazu müssen wir per JS das gewünschte Element ansprechen. Für diesen Zweck gibt es das DOM -> Document Object Model.

Ein Beispiel, wir setzen einen CSS Stil per JS. Erstelle im HTML ein Element mit der ID kreis und gib ihm ein paar CSS Stile.

Ein drittes Beispiel

 <div id="kreis"></div>

 #kreis {
            border-radius: 50%;
            width: 400px;
            height: 400px;
            background-color: #000506;
        }

Nun greifen wir über das DOM auf das Element kreis zu und verändern das CSS Attribut background-color über JS.

  function changeProperties(){
      let kreis = document.getElementbyId('kreis');/* Zugriff auf das Element kreis */
      kreis.style.backgroundColor = "red";/* Verändern des CSS Attributs */
      /*todo
      Probiere mal, andere CSS Properties zu verändern*/
   }

Auf die CSS Attribute greifst du in dieser Schreibweise zu (Muster): element.style.nameProperty Die Namen der Property sind in JS für einzelne Begriffe wir border, color gleich wie im CSS. Also element.style.color oder element.style.color. Für CSS Properties mit Bindestrich wie background-color, border-radius, animation-name gilt, dass das erste Wort klein geschrieben ist und das zweite gross und ohne Bindestrich direkt an das erste Wort gesetzt wird.
Also:
CSS background-color -> JS backgroundColor
CSS animation-name -> JS animationName
Eine Übersicht findest du hier: https://www.w3schools.com/jsref/dom_obj_style.asp

Ein viertes Beispiel: CSS Animation über JS starten

Wir werden nun eine CSS Animation über JavaScript starten. – CSS Animation erstellen mit dem Schlüsselwort @keyframes, und ein neues Element, das wir animieren werden, zum Beispiel:

@keyframes anim {
            0% {
                box-shadow: 0px 0px 8px 8px #e803ba;
            }
            25% {
                box-shadow: 0px 0px 0px 8px #e803ba, 0px 0px 8px 16px #e8035b;
                background-color: #03e8ba;
            }
            50% {
                box-shadow: 0px 0px 0px 8px #e803ba, 0px 0px 0px 16px #e84803, 0px 0px 8px 24px #e85f03;
                background-color: #038ce8;
            }
            75% {
                box-shadow: 0px 0px 0px 8px #e803ba, 0px 0px 0px 16px #e84803, 0px 0px 0px 24px #e85f03, 0px 0px 8px 32px #e8a303;
            }
        }
#kreis2 {
            border-radius: 50%;
            width: 400px;
            height: 400px;
            background-color: #000506;
            
        }

Nun weisen wir #kreis2 die Animation zu, wir wollen aber, dass sie noch nicht startet. Dazu kannst du den animation-play-state: paused; setzen.

            animation-name: anim;
            animation-duration: 4s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-play-state: paused;

Wir werden nun einen Button erstellen und über Klick die Animation starten:

   
        function starteAnimation() {
            let element = document.getElementById('kreis2');
            element.style.animationPlayState = "running";
         
        }
  

Material für Selbststudium freiwillig

Mouse Follower bauen

https://codepen.io/Nandugokul-K-N/pen/MWLxWoV

Extended Automatisierung (nicht Material des Inputs)

Etwas in einem bestimmten zeitlichen Abstand immer und immer wieder ausführen, z.Bsp. abfragen, wo die Mausposition ist oder die Uhrzeit setzen, usw. Dafür gibt es die Funktion, sie ruft in einem bestimmten zeitlichen Abstand eine andere Funktion auf: setInterval(andereFunktion, Zeit).

setInterval(function () {
  doSomething();
}, 20);

function doSomething(){
      let kreis = document.getElementbyId('kreis');/* Zugriff auf das Element kreis */
      kreis.style.left =eval(parseInt(kreis.style.left)+1)+"px";/* Update CSS Attributs left, Element wandert nach rechts */
}