---
title: "Bodyclass per Javascript setzen um CSS Verhalten zu steuern"
date: "6/26/2016, 10:00 PM"
category: "Development"
topics: ["javascript", "css", "development"]
canonical: "https://sveltekit.davidhellmann.com/blog/bodyclass-per-javascript-setzen-um-css-verhalten-zu-steuern"
section: "blog"
---

# Bodyclass per Javascript setzen um CSS Verhalten zu steuern

<p>Seit ein paar Monaten bin ich ja mit meiner eigenen kleinen <a href="https://www.npmjs.com/package/generator-dhboilerplate">Boilerplate</a> unterwegs, die von mir als Grundlage für neue Projekte genutzt wird. Mit dabei sind auch paar kleinere Javascript Snippets die ich ständig im Einsatz habe. Eines davon ist <strong>bodyclass.js </strong>was im Grunde nichts weiter macht, als beim Laden der Website ein paar Klassen zum body hinzufügt.</p>

**bodylclass.js**

```javascript
/**
 * Set Body Classes
 */

var _body     = document.querySelector('body'),
    _steps    = 1000,
    _duration = 3000,
    _timer    = 0,
    _i        = 1;

while (_timer <= _duration) {
  if (_timer == 0) {
    _body.classList.add('is_ready');
  } else {
    setTimeout(function() {
      _body.classList.add('is_now_' + (_i * _steps));
      _i++;
    }, _timer);
  }
  
  _timer = _timer  + _steps;
}
```

<p>Nehmen wir das ganze doch mal etwas auseinander… </p>

```javascript
var _body     = document.querySelector('body'),
     _steps    = 1000,
     _duration = 3000,
     _timer    = 0,
     _i        = 1;
```

<p>Im ersten Schritt werden die Variablen gesetzt. <strong>_body</strong> ist dabei das Ziel wo die Klassen hinzugefügt werden. <strong>_steps</strong> und <strong>_duration</strong> stehen in Verbindung. <strong>_duration</strong> ist dabei der höchstmögliche Wert in ms und <strong>_steps</strong> gibt an in welchen ms Sprüngen letztendlich hochgezählt wird. </p><p><strong>_timer</strong> dient zum hoch zählen der <strong>_steps</strong> bis <strong>_duration</strong> erreicht wurde. <strong>_i</strong> ist ein einfach Zähler, der die <strong>_steps</strong> letztendlich multipliziert und es an einen Klassennamen hängt. </p><p>Die while Schleife läuft jetzt solange durch bis <strong>_steps</strong> kleiner gleich <strong>_duration</strong> ist. </p>

```javascript
while (_timer <= _duration) {
  if (_timer == 0) {
    _body.classList.add('is_ready');
  } else {
    setTimeout(function() {
      _body.classList.add('is_now_' + (_i * _steps));
      _i++;
    }, _timer);
  }

  _timer = _timer  + _steps;
}
```

<p>Dabei wird <strong>_timer</strong> immer wieder mit dem <strong>_steps</strong> Wert addiert. Innerhalb der while Schleife ist eine weitere if Abfrage vorhanden. Dort wird geprüft ob <strong>_timer</strong> gleich 0 ist und falls das der Fall ist, bekommt der body die Klasse "<strong>is_ready</strong>" hinzugefügt. Das heißt unsere Javascript Datei ist geladen und ausgeführt. Wenn <strong>_timer</strong> größer 0 ist wird der else Teil ausgeführt. Dort wird dann die setTimeout Funktion so oft aufgerufen bis die bis <strong>_timer</strong> größer als <strong>_duration</strong> ist. In dem Beispiel oben wäre das genau drei mal.</p><p>Letztendlich landen hier dann zusätzlich zur "<strong>is_ready</strong>" Klasse auch noch "<strong>is_now_1000, is_now_2000, is_now_3000</strong>" im body Element. Letztendlich recht unspektakulär aber bei mir wie gesagt des öfteren im Einsatz. Das mir wichtige dabei ist, dass ich etwas habe was fix ist wovon ich ausgehen kann um dann Sachen wie folgende zu machen:</p>

```css
.aboutIntro__image {
  transform: translate3d(0, 200px, 0);
  transition: all 0.5s ease-out;
  opacity: 0;

  .is_now_1000 & {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: all 0.5s 0.1s ease-out;
  }
}

.aboutIntro__content {
  .copy {
    transform: translate3d(0, 300px, 0);
    transition: all 0.5s ease-out;
    opacity: 0;

    .is_now_1000 & {
      transform: translate3d(0, 100px, 0);
      opacity: 1;
      transition: all 0.5s 0.6s ease-out;
    }

    .aboutIntro__vertical {
      transform: translate3d(0, 100px, 0) rotate(-90deg);
      transition: all 0.5s ease-out;
      opacity: 0;

      .is_now_1000 & {
        transform: translate3d(0, -5px, 0) rotate(-90deg);
        opacity: 1;
        transition: all 0.5s 1s ease-out;
      }
    }
  }

  .headline {
    transform: translate3d(0, 300px, 0);
    transition: all 0.5s ease-out;
    opacity: 0;

    .is_now_1000 & {
      transform: translate3d(0, 100px, 0);
      opacity: 1;
      transition: all 0.5s 0.35s ease-out;
    }

    &::before {
      transform: translate3d(0, 200px, 0);
      transition: all 0.5s ease-out;
      opacity: 0;

      .is_now_1000 & {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        transition: all 0.5s 0.85s ease-out;
      }
    }
  }
}
```

<p>Vielleicht kann ja jemand was damit anfangen. Wenn nicht, dann nicht :) Fragen und Anregungen gern in die Kommentare. </p>