تبديل classList

الدرس 13 من 13 في دورة دوال JavaScript DOM على Coddy.

تعمل طريقة classList.toggle(class) في JavaScript كمفتاح لإضافة أو إزالة فئة (class) من عنصر ما. على سبيل المثال:

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

تقوم طريقة classList.toggle() المذكورة أعلاه بتبديل فئة fluid-container للعنصر الذي يمتلك المعرف (ID) container.

التحدي

سهل

لقد تم تزويدك بكود HTML و CSS يحتوي على زر تبديل وعنصر div مع ID وتنسيقات خاصة بكل منهما.

باستخدام 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>

جميع دروس دوال JavaScript DOM

1مقدمة

مقدمة Document Object Model

2طرق DOM (١)

getElementById تعديل نمط العنصر getElementsByClassName التكرار والمعالجة getElementsByTagName querySelector

3طرق DOM الجزء الثاني

querySelectorAll addEventListener innerHTML createElement و appendChildتبديل classList