CSS وJavaScript

بواسطة /

CSS وJavaScript هما عنصران أساسيان في تطوير واجهات المستخدم. CSS يُستخدم لتنسيق وتجميل العناصر في صفحة الويب، بينما يُستخدم JavaScript لإضافة التفاعلية والحيوية. يمكننا تحقيق تجربة مستخدم مثالية من خلال دمج JavaScript مع CSS بحيث يمكن للتطبيق التفاعل مع المستخدم وتغيير الأنماط (styles) استجابةً لأحداث معينة.

في هذا الدرس، سنتعرف على كيفية دمج CSS مع JavaScript لتغيير الأنماط بشكل ديناميكي، وسنستعرض بعض الأمثلة التي توضح كيفية تنفيذ ذلك.

لماذا نستخدم JavaScript لتغيير أنماط CSS؟

تغيير الأنماط باستخدام JavaScript يتيح لك العديد من الإمكانيات:

  1. التفاعل مع المستخدم: يمكنك تعديل الأنماط استجابةً لتفاعلات المستخدم، مثل النقر على زر، أو تمرير مؤشر الفأرة.
  2. التصميم الديناميكي: يمكن JavaScript تغيير الأنماط بناءً على بيانات معينة، مما يمنحك المرونة لجعل الموقع أكثر تفاعلية.
  3. تحكم أكبر في الصفحة: بدلاً من الاعتماد فقط على CSS، يمكنك استخدام JavaScript لتعديل العناصر بما يتناسب مع السيناريوهات المختلفة.

طرق التفاعل بين CSS وJavaScript لتغيير الأنماط

1. تغيير الأنماط باستخدام خصائص style

يمكنك استخدام JavaScript للوصول إلى عنصر معين وتغيير خصائص الأنماط الخاصة به من خلال خاصية style.

مثال

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>التفاعل بين CSS وJavaScript</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="box" id="myBox"></div>
<button onclick="changeColor()">تغيير اللون</button>

<script>
    function changeColor() {
        const box = document.getElementById('myBox');
        box.style.backgroundColor = 'red';
    }
</script>

</body>
</html>

الشرح:

  • هنا، عند النقر على الزر “تغيير اللون”، يتم استدعاء الدالة changeColor().
  • تقوم الدالة بتحديد العنصر الذي يحتوي على id="myBox" وتغيير خاصية backgroundColor إلى اللون الأحمر.

2. إضافة أو إزالة فئات (Classes)

طريقة فعالة أخرى لتغيير الأنماط هي إضافة أو إزالة فئات CSS باستخدام JavaScript. تعتبر هذه الطريقة مثالية لأنها تسمح لنا بتجنب تغيير الأنماط مباشرة، بل نكتفي بإضافة فئات تحتوي على الأنماط المطلوبة.

مثال

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إضافة/إزالة الفئات باستخدام JavaScript</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.3s;
        }

        .active {
            background-color: green;
        }
    </style>
</head>
<body>

<div class="box" id="myBox"></div>
<button onclick="toggleClass()">تبديل الفئة</button>

<script>
    function toggleClass() {
        const box = document.getElementById('myBox');
        box.classList.toggle('active');
    }
</script>

</body>
</html>

الشرح:

  • تحتوي الفئة .active على الأنماط التي نريد إضافتها أو إزالتها، في هذه الحالة تغيير الخلفية إلى اللون الأخضر.
  • تقوم الدالة toggleClass() باستخدام classList.toggle() لإضافة أو إزالة الفئة active من العنصر.

3. التحكم في الأنماط باستخدام CSS المتغيرات وJavaScript

تتيح CSS Variables تخصيص التصميم بسهولة، ويمكننا تغيير قيمها باستخدام JavaScript.

مثال

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تغيير CSS Variables باستخدام JavaScript</title>
    <style>
        :root {
            --main-bg-color: blue;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: var(--main-bg-color);
            transition: background-color 0.3s;
        }
    </style>
</head>
<body>

<div class="box" id="myBox"></div>
<button onclick="changeVariable()">تغيير المتغير</button>

<script>
    function changeVariable() {
        document.documentElement.style.setProperty('--main-bg-color', 'purple');
    }
</script>

</body>
</html>

الشرح:

  • قمنا بتعريف متغير CSS باسم --main-bg-color ليحمل لون الخلفية الافتراضي.
  • عند النقر على الزر، تقوم الدالة changeVariable() بتغيير قيمة المتغير إلى اللون البنفسجي باستخدام setProperty.

4. التعامل مع الأحداث وتغيير الأنماط

يمكن لـ JavaScript أيضًا تغيير الأنماط عند وقوع أحداث معينة، مثل تمرير الفأرة أو النقر على العناصر.

مثال

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تغيير الأنماط عند التمرير على العنصر</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.3s;
        }
    </style>
</head>
<body>

<div class="box" id="myBox"></div>

<script>
    const box = document.getElementById('myBox');

    box.addEventListener('mouseover', function() {
        box.style.backgroundColor = 'orange';
    });

    box.addEventListener('mouseout', function() {
        box.style.backgroundColor = 'blue';
    });
</script>

</body>
</html>

الشرح:

  • يقوم الحدث mouseover بتغيير لون الخلفية إلى البرتقالي عند تمرير الفأرة فوق المربع.
  • يعيد الحدث mouseout اللون إلى الأزرق عند إبعاد الفأرة عن العنصر.

الخاتمة

يعد دمج CSS مع JavaScript لتغيير الأنماط بشكل ديناميكي أمرًا ضروريًا في تطوير الويب لتقديم تجربة تفاعلية ومرنة. باستخدام JavaScript، يمكنك تغيير الأنماط بطرق متعددة، سواءً بتغيير خصائص style مباشرةً، أو بإضافة/إزالة الفئات، أو بتحديث CSS Variables، أو حتى عن طريق الاستجابة للأحداث.

هل انت مستعد للدرس التالي من كورس css مع منصة كود التطور التعليمية؟

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top
Verified by MonsterInsights