تغيير أنماط الصفحة أثناء التنقل باستخدام JavaScript


يشيع استخدام JavaScript لإجراء تغييرات صغيرة في صفحة ويب استجابةً لبعض الإجراءات التي يتخذها القارئ. لقد واجهت مؤخرًا موقفًا حيث أردت تغيير نمط المستند تمامًا اعتمادًا على عوامل معينة. كما هي عادتي ، قررت أن أكتب برنامجًا صغيرًا للعب به. من أجل التجريب ، قررت العمل مع بعض التغييرات البسيطة والبسيطة في الأسلوب. إذا كان هذا هو هدفي النهائي ، فربما يكون من الأسهل إجراء التغييرات مباشرةً - على سبيل المثال ، تعيين لون الخلفية عن طريق تعيين document.body.style.background على خياري المطلوب. ومع ذلك ، أردت استخدام CSS ، لأنني أجد ذلك أكثر بساطة لإجراء تغييرات كبيرة الحجم (وأيضًا ، لأنه من الأسهل فقط قص ولصق CSS عندما ترى ما تريد!)

التصميم:
أستخدم أوراق أنماط مضمّنة مع العلامة كثيرًا إلى حد ما ، لذلك هذا ما استخدمته لتجربتي. لدعم هذا ، وضعت مجموعة فارغة من علامات الأنماط في رأس صفحتي. نظرًا لأن هذه تجربة وأريد رمزًا يمكن إعادة استخدامه للمشاريع الكبيرة ، فقد قررت استخدام دالة لإجراء التغييرات. تأخذ وظيفتي ، change_style ، النمط المرغوب به في بناء جملة CSS كوسيطة تقوم بتعيينها كمحتوى بين علامات نمط الفتح والإغلاق من خلال تعيينه إلى document.getElementsByTagName ('style') [0] .innerHTML.

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

الشفرة:
بدا لي الرمز النهائي مثل هذا:




تغيير الاسلوب



function change_style (new_style) {
document.getElementsByTagName ( 'أسلوب') [0] .innerHTML = new_style.
}



اضغط على زر لتغيير النمط













نقاش:
هذا يعمل بشكل جيد ، ولكن سرعان ما يصبح غير عملي لأن لديك المزيد من معلومات الأنماط. أعتقد أن استخدام أوراق الأنماط الخارجية سيكون حلاً أفضل في هذه الحالة. يبدو استخدام علامة النمط أكثر فائدة لإضافة عنصر أو عنصرين في ورقة النمط أو تغييرهما. مع الاستفادة من ميزة المتتالية في CSS ، يمكن القيام بذلك عن طريق تغيير الوظيفة ببساطة لاستخدام عامل التسلسل (. =) لإلحاق معلومات جديدة بالمحتويات بين علامات النمط.
ينتج عن هذا الوظيفة التالية:

function change_style (new_style) {
document.getElementsByTagName ( 'أسلوب') [0] .innerHTML = new_style؛
}

في كلتا الحالتين ، نفترض أن لدينا مجموعة واحدة فقط من علامات الأنماط في المستند. يبدو هذا افتراضًا معقولًا ، لكن ماذا لو كان لديك أوراق أنماط مختلفة للطباعة مقابل استخدام الشاشة؟ كيف تعرف انك تغير الصحيح؟

مرجع:
أوراق الأنماط في مستندات HTML - من W3C

12 javascript جافا سكريبت access css style using javascript تغيير التنسيق من خلال جافا سكريبت (شهر اكتوبر 2022)



المادة العلامات: تغيير أنماط الصفحة أثناء التنقل باستخدام JavaScript و JavaScript و Java و CSS وتصميم الويب وجلود تصميم الويب وجلود صفحات الويب وجلود الويب وأنماط javascript والأنماط المضمنة و html و xhtml و xml