שינוי סגנון של אלמנט

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

המאפיין הבא שנלמד הוא style, שאחראי לשינוי סגנון קיים. אפשר לשנות את הסגנון כך:

const element = document.getElementById("elementID");
element.style.color = "green";

אחרי הקוד הזה, הצבע של #elementID ישתנה ל־green.

אתגר

קל

ניתן לך קוד HTML שמכיל div עם מזהה.

באמצעות JavaScript בלבד, שנה את צבע הרקע של div זה לאדום:

אחזר את הרכיב באמצעות הפונקציה getElementById.
שנה את סגנון צבע הרקע של הרכיב באמצעות המאפיין style.backgroundColor.

נסו בעצמכם

<!DOCTYPE html>
<html>
    <body>
        <div id="box" style="width: 100px; height: 100px;">Content</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 אונליין