يعد تغيير أنماط الصفحات ديناميكيا باستخدام جافا سكريبت إحدى الميزات المهمة التي توفرها لغة البرمجة هذه. تتمثل إحدى طرق التأثير على مظهر عناصر الصفحة في تغيير قيم متغيرات كس.
متغير كس هو اسم مرتبط بقيمة محددة في ورقة الأنماط. باستخدام جافا سكريبت ، يمكننا الوصول إلى هذه المتغيرات وتغيير قيمها في الوقت الفعلي ، مما يسمح لنا بتغيير أنماط عناصر الصفحة بسهولة دون الحاجة إلى تحرير ورقة الأنماط يدويا.
لتغيير قيمة متغير كس في جافا سكريبت ، يمكننا استخدام خاصية النمط للعنصر الذي نريد تطبيق التغيير عليه ، وخاصية سيتبروبيرتي لتعيين قيمة جديدة للمتغير. على سبيل المثال ، لتغيير قيمة متغير لون الخلفية لعنصر مع معرف "مياليمنت" ، يمكننا استخدام التعليمات البرمجية التالية:
وثيقة.جيتليمينتبيد ("مياليمنت").أسلوب.سيتبروبيرتي ("لون الخلفية" ، "الأحمر");
بهذه الطريقة ، يمكننا تغيير أنماط عناصر الصفحة ديناميكيا ، بما في ذلك متغيرات كس ، باستخدام جافا سكريبت. هذا يفتح العديد من الاحتمالات لإنشاء الرسوم المتحركة والعناصر التفاعلية وواجهات المستخدم الديناميكية.
- تغيير متغير كس باستخدام جافا سكريبت
- طرق لتغيير متغير كس
- 1. من خلال خاصية النمط
- 2. عبر كسستيلشيت
- 3. من خلال الفصول الدراسية
- 4. عبر سيتاتريبوت و جيتاتريبوت
- سؤال وجواب
- كيف يمكنني تغيير قيمة متغير المغلق في جافا سكريبت?
- هل من الممكن تغيير قيمة متغير المغلق فقط لعنصر معين?
- كيف يمكنني تغيير قيمة متغير المغلق باستخدام وظيفة مخصصة?
- كيف يمكنني تغيير قيمة العديد من المتغيرات المغلق في نفس الوقت?
- كيف يمكنني تحريك تغيير قيمة متغير المغلق?
تغيير متغير كس باستخدام جافا سكريبت
باستخدام متغيرات كس (المعروف أيضا باسم خصائص مخصصة) يسمح لنا بسهولة تغيير قيم النمط على عناصر مختلفة من صفحة ويب. يمنحك هذا المرونة والسهولة في تغيير مظهر العناصر باستخدام جافا سكريبت.
). يحتوي هذا الكائن على خاصية نمط تسمح لنا بالوصول إلى أنماط المستندات.
وتمرير وسيطتين لذلك: اسم متغير كس والقيمة الجديدة.
إلى الأحمر:
وثيقة.وثيقة.أسلوب.سيتبروبيرتي ('primary اللون الأساسي' ، 'الأحمر');
لتطبيق التغييرات ، تحتاج إلى استدعاء هذا الرمز داخل دالة أو معالج أحداث. على سبيل المثال ، يمكنك استدعاء هذا السطر من التعليمات البرمجية عند النقر فوق زر أو بعد تحميل صفحة.
. وبالتالي ، فإن تغيير متغير كس سيغير تلقائيا جميع العناصر التي تستخدم هذا المتغير.
من الممكن أيضا استخدام جافا سكريبت لتغيير قيم خصائص كس الأخرى بناء على الشروط أو إدخال المستخدم.
دعونا إخراج تمثيل جدولي من التعليمات البرمجية الرئيسية لتغيير متغير كس باستخدام جافا سكريبت:
| كود | الوصف |
|---|---|
من الوثيقة.وثيقة.أسلوب.سيتبروبيرتي ('primary اللون الأساسي' ، 'الأحمر'); | إلى الأحمر. |
طرق لتغيير متغير كس
هناك عدة طرق لتغيير متغير كس باستخدام جافا سكريبت. دعونا ننظر في كل واحد منهم.
1. من خلال خاصية النمط
الطريقة الأولى هي استخدام خاصية نمط العنصر. يمكننا الوصول إلى خصائص كس الفردية من خلال هذه الخاصية وتغيير قيمها.
// الحصول على العنصر الذي نريد تطبيق الأنماط عليه
عنصر فار = وثيقة.جيتليمينتبيد ('مياليمنت');
// تغيير قيمة متغير كس عبر النمط
عنصر.خاصية النمط.سيتبروبيرتي ('my بلدي فار' ، 'قيمة جديدة');
2. عبر كسستيلشيت
وتستند الطريقة الثانية على استخدام كائن كسستيلشيت. يسمح لنا هذا الكائن بالوصول إلى ورقة الأنماط وتغيير متغيرات كس.
// الحصول على ورقة الأنماط
ورقة فار = وثيقة.أوراق الأنماط [0];
// الحصول على متغير كس بالاسم وتغيير قيمته
إلى ورقة.كسرولز [0].أسلوب.سيتبروبيرتي ('my بلدي فار' ، 'قيمة جديدة');
3. من خلال الفصول الدراسية
الطريقة الثالثة هي تغيير فئة العنصر باستخدام جافا سكريبت. يمكننا تحديد فئة جديدة بأنماط معدلة وتطبيقها على العنصر.
// نحصل على العنصر الذي نريد تطبيق الفئة الجديدة عليه
عنصر فار = وثيقة.جيتليمينتبيد ('مياليمنت');
// تغيير فئة العنصر
عنصر.اسم الفئة = 'فئة جديدة';
4. عبر سيتاتريبوت و جيتاتريبوت
تستخدم الطريقة الرابعة وظائف سيتاتريبوت وجيتاتريبوت ، والتي تسمح لنا بتعيين أو الحصول على قيمة سمة عنصر. يمكننا استخدام هذه الدالات لتغيير قيمة متغير كس.
// الحصول على العنصر الذي نريد تغيير متغير كس إلى
عنصر فار = وثيقة.جيتليمينتبيد ('مياليمنت');
// الحصول على القيمة الحالية لمتغير كس
فار أولدفالو = عنصر.جيتاتريبوت ('نمط');
// تغيير قيمة متغير كس
فار نيوفالو = أولدفالو.استبدال ('my بلدي فار: القيمة القديمة' ، 'my بلدي فار: قيمة جديدة');
عنصر.سيتاتريبوت ('نمط' ، نيوفالو);
هذه هي الطرق الأربعة الرئيسية التي يمكننا استخدامها لتغيير متغير كس باستخدام جافا سكريبت. اختيار واحد الذي هو الأكثر ملاءمة لحالتك وتطبيقه في المشروع الخاص بك.
سؤال وجواب
كيف يمكنني تغيير قيمة متغير المغلق في جافا سكريبت?
لتغيير قيمة متغير كس في جافا سكريبت ، يمكنك استخدام التعليمات البرمجية التالية:
هل من الممكن تغيير قيمة متغير المغلق فقط لعنصر معين?
نعم ، بالطبع. لتغيير قيمة متغير كس فقط لعنصر معين ، تحتاج إلى الوصول إليه من خلال محدد واستخدام طريقة سيتبروبيرتي لخاصية النمط ، كما هو موضح في المثال التالي:
كيف يمكنني تغيير قيمة متغير المغلق باستخدام وظيفة مخصصة?
لتغيير قيمة متغير كس باستخدام دالة مخصصة ، استخدم طريقة جيتكومبوتدستيل للحصول على القيمة الحالية للمتغير ، ثم استدعاء هذه الوظيفة عن طريق تمرير القيمة الجديدة للمتغير كوسيطة ، كما هو موضح في المثال التالي:
كيف يمكنني تغيير قيمة العديد من المتغيرات المغلق في نفس الوقت?
لتغيير قيمة عدة متغيرات كس في نفس الوقت ، يمكنك استخدام طريقة سيتبروبيرتيز عن طريق تمرير كائن مع أزواج" متغير: قيمة " لذلك ، كما هو مبين في المثال التالي:
كيف يمكنني تحريك تغيير في قيمة متغير المغلق?
يمكنك استخدام انتقالات كس أو الرسوم المتحركة كس لتحريك التغييرات في قيمة متغير كس. على سبيل المثال ، يمكنك تعيين انتقال لخاصية باستخدام خاصية الانتقال ومدة الانتقال ووظيفة توقيت الانتقال ، كما هو موضح في المثال التالي: