Appearance
Kapitel 28: CSS+JS Kombination
🔄 Lernziel: Kombinieren Sie CSS und JavaScript, um interaktive Effekte zu erstellen.
28.1 Themenfarbe mit Klick umschalten
💡 Projektziel
Verwenden Sie CSS-Variablen und JavaScript, um die Themenfarbe mit einem Klick umzuschalten.
🎯 Verwendete Kenntnisse
- CSS-Variablen
- JavaScript Event-Listener
classList.toggle()
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Themenfarbe umschalten</title>
<style>
:root {
--hauptfarbe: #4CAF50;
--hintergrundfarbe: white;
--textfarbe: #333;
}
body {
background-color: var(--hintergrundfarbe);
color: var(--textfarbe);
font-family: Arial, sans-serif;
transition: background-color 0.5s ease, color 0.5s ease;
}
.button {
background-color: var(--hauptfarbe);
color: white;
padding: 15px 32px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
/* Dunkles Thema */
.dunkles-thema {
--hauptfarbe: #2196F3;
--hintergrundfarbe: #333;
--textfarbe: white;
}
</style>
</head>
<body>
<h1>Meine Webseite</h1>
<p>Inhalt der Webseite...</p>
<button class="button" id="themaButton">Thema umschalten</button>
<script>
document.getElementById('themaButton').addEventListener('click', function() {
document.body.classList.toggle('dunkles-thema');
});
</script>
</body>
</html>Erklärung:
:root- Definiert globale CSS-Variablen.dunkles-thema- Überschreibt die Variablen für das dunkle ThemaclassList.toggle()- Schaltet die CSS-Klasse ein/aus
28.2 Inhalt beim Darüberfahren anzeigen/verbergen
💡 Projektziel
Verwenden Sie CSS-Übergänge und JavaScript, um Inhalt beim Darüberfahren anzuzeigen.
🎯 Verwendete Kenntnisse
- CSS-Übergänge (Transitions)
- JavaScript Event-Listener (
mouseover,mouseout) style.opacity
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Inhalt anzeigen/verbergen</title>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
overflow: hidden;
}
.bild {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease;
}
</style>
</head>
<body>
<div class="container" id="container">
<img src="bild.jpg" alt="Bild" class="bild">
<div class="overlay" id="overlay">
<h3>Beschreibung</h3>
<p>Dies ist eine Beschreibung des Bildes.</p>
</div>
</div>
<script>
const container = document.getElementById('container');
const overlay = document.getElementById('overlay');
container.addEventListener('mouseover', function() {
overlay.style.opacity = '1';
});
container.addEventListener('mouseout', function() {
overlay.style.opacity = '0';
});
</script>
</body>
</html>Erklärung:
overflow: hidden- Versteckt überlaufenden Inhalttransition: opacity 0.5s ease- Sanfter Übergang für die Transparenzmouseover/mouseout- Ereignisse für Maus-Überfahren/Verlassen
28.3 Navigationsleiste beim Scrollen ändern
💡 Projektziel
Verwenden Sie CSS-Positionierung und JavaScript Scroll-Ereignisse, um die Navigationsleiste beim Scrollen zu ändern.
🎯 Verwendete Kenntnisse
- CSS-Positionierung (
position: fixed) - JavaScript Scroll-Ereignis (
window.onscroll) classList.add()/classList.remove()
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Navigationsleiste beim Scrollen</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: transparent;
padding: 20px;
transition: background-color 0.3s ease, padding 0.3s ease;
z-index: 1000;
}
nav.scrolled {
background-color: #333;
padding: 10px 20px;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
.inhalt {
height: 2000px;
padding-top: 80px;
background: linear-gradient(white, lightgray);
}
</style>
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<div class="inhalt">
<h1>Willkommen auf meiner Webseite</h1>
<p>Scrollen Sie nach unten, um die Navigationsleiste zu sehen...</p>
</div>
<script>
window.onscroll = function() {
const nav = document.getElementById('navbar');
if (window.scrollY > 50) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
};
</script>
</body>
</html>Erklärung:
position: fixed- Fixiert die Navigationsleiste obenwindow.onscroll- Ereignis, das beim Scrollen ausgelöst wirdwindow.scrollY- Gibt die aktuelle Scroll-Position zurück
28.4 Formularvalidierungs-Styling umschalten
💡 Projektziel
Verwenden Sie CSS-Pseudoklassen und JavaScript-Formularvalidierung, um das Styling bei erfolgreicher/fehlgeschlagener Validierung zu ändern.
🎯 Verwendete Kenntnisse
- CSS-Pseudoklassen (
:valid,:invalid) - JavaScript-Formularvalidierung (
checkValidity()) addEventListener()
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Formularvalidierung</title>
<style>
* {
box-sizing: border-box;
}
.form-container {
width: 350px;
margin: 100px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.form-input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.form-input:valid {
border-color: green;
}
.form-input:invalid {
border-color: red;
}
.form-input:focus {
outline: none;
}
.submit-button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
.fehler-meldung {
color: red;
font-size: 14px;
margin-top: 5px;
display: none;
}
</style>
</head>
<body>
<div class="form-container">
<form id="meinForm">
<input type="email" class="form-input" placeholder="E-Mail" required>
<div class="fehler-meldung" id="fehlerMeldung">Bitte geben Sie eine gültige E-Mail-Adresse ein.</div>
<input type="password" class="form-input" placeholder="Passwort (mindestens 6 Zeichen)" minlength="6" required>
<button type="submit" class="submit-button">Absenden</button>
</form>
</div>
<script>
const form = document.getElementById('meinForm');
const fehlerMeldung = document.getElementById('fehlerMeldung');
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault();
fehlerMeldung.style.display = 'block';
}
});
form.addEventListener('input', function() {
if (form.checkValidity()) {
fehlerMeldung.style.display = 'none';
}
});
</script>
</body>
</html>Erklärung:
:valid/:invalid- Pseudoklassen für gültige/ungültige EingabecheckValidity()- Methode zur Überprüfung der Formulargültigkeitevent.preventDefault()- Verhindert das Absenden des Formulars bei Fehlern
✅ Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Themenfarbe umschalten - CSS-Variablen + JavaScript
- ✅ Inhalt anzeigen/verbergen - CSS-Übergänge + JavaScript
- ✅ Navigationsleiste ändern - CSS-Positionierung + JavaScript Scroll
- ✅ Formularvalidierung - CSS-Pseudoklassen + JavaScript
🎯 Übung
Übung 1: Erstellen Sie eine Schaltfläche, die die Hintergrundfarbe der Seite ändert.
Übung 2: Erstellen Sie ein Bild, das beim Darüberfahren eine Beschreibung einblendet.
Übung 3: Erstellen Sie ein Formular mit Echtzeit-Validierung.
📚 Nächstes Kapitel
Im nächsten Kapitel lernen wir Werkzeuge (Werkzeuge), um nützliche Tools für die CSS-Entwicklung kennenzulernen.
[Weiter zu Kapitel 29: Werkzeuge →]