החלפת מצב באמצעות classList

שיעור 13 מתוך 13 בקורס שיטות DOM ב-JavaScript של Coddy.

השיטה classList.toggle(class) ב-JavaScript פועלת כמו מתג להוספה או להסרה של מחלקה מאלמנט. לדוגמה:

const element = document.getElementById("container");
element.classList.toggle("fluid-container");

השיטה classList.toggle() שלעיל מחליפה את מצב המחלקה fluid-container באלמנט עם המזהה container.

אתגר

קל

ניתנו לך קוד HTML & CSS שמכיל כפתור החלפה ו־div עם מזהה ועיצובים תואמים.

באמצעות JavaScript בלבד, החלף את המחלקה dark-mode של התוכן בלחיצה על כפתור.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <button id="toggleButton">Toggle Dark Mode</button>
        <div id="content">This is some content. Click the button to toggle dark mode.</div>
        <script src="script.js"></script>
    </body>
</html>

כל השיעורים ביחידה שיטות DOM ב-JavaScript

1מבוא

מבוא מודל אובייקט המסמך

2שיטות DOM I

getElementById שינוי סגנון של אלמנט getElementsByClassName מעבר בלולאה ושינוי אלמנטים getElementsByTagName querySelector

3שיטות DOM II

querySelectorAll addEventListener innerHTML createElement ו-appendChildהחלפת מצב באמצעות classList

תרגלו בעצמכם: Web אונליין