تعديل نمط العنصر

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

الخاصية التالية التي سنتعلمها هي style وهي المسؤولة عن تغيير التنسيق الحالي. يمكنك تعديل التنسيق بهذا الشكل:

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

بعد هذا الكود، سيتغير لون #elementID إلى green.

التحدي

سهل

لقد تم تزويدك بكود HTML يحتوي على div بمعرف (ID).

باستخدام JavaScript فقط، قم بتغيير لون الخلفية لهذا الـ div إلى "red":

قم باستدعاء العنصر باستخدام دالة getElementById.
قم بتعديل نمط لون الخلفية للعنصر باستخدام خاصية style.backgroundColor.

جرّب بنفسك

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