جلب السحابة

الدرس 7 من 18 في دورة سحب متحركة - مشروع HTML/CSS/JS على Coddy.

دعونا نلقي نظرة سريعة على كيفية التلاعب بعناصر DOM باستخدام JS.

للحصول على العناصر عن طريق اسم الفئة (class name)، استخدم document.getElementsByClassName:

const elements = document.getElementsByClassName("someName");

ما سبق سيجلب مصفوفة لجميع العناصر في المستند التي تحمل اسم فئة "someName".

لتعديل نمط (style) عنصر ما، استخدم خاصية style:

const elements = document.getElementsByClassName("someName");
const element = elements[0];
element.style.background = "red";

ما سبق سيقوم بتعيين لون الخلفية لأول عنصر يحمل اسم فئة "someName" إلى "red".

ملاحظة: إذا كانت elements مصفوفة فارغة، سيفشل البرنامج.

التحدي

سهل

في ملف JS:

احصل على العناصر التي تحمل اسم الفئة "cloud"
احصل على العنصر الأول في العناصر (السحابة الوحيدة لدينا) وقم بتعيين:
1. نمط top إلى قيمة أكبر من "0px"
2. نمط left إلى قيمة أكبر من "0px"

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>