Amaiko WebLog

كيف تغير الـ CSS IDs باستخدام الجافا اسكربت

يوجد طرق و تكنيكات متعددة لتغير الـ CSS باستخدام الجافا اسكربت منها ما ساذكره الان. و نحتاج لمثل هذه التكنيكات لاضافة مزيد من الديناميكية علي صفحاتنا.

كيفية الاستفادة منها

يمكننا مثلا و بكل سهولة اضافة DIV يحتوي علي اعلانات و جعل المستخدم للصفحة يتحكم في اظهار او اخفاء هذه الاعلانات او مثلا جعل المستخدم يختار حجم اكبر للخطوط الموجودة او مثلا يمكننا ان نصمم صفحاتنا علي اساس ان عرضها 800 بكسل و اضافة خاصية تمكن المستخدم من جعل عرض الصفحة 1024 بكسل لمستخدمي الشاشات ذات الدقة الاكبر

مثال علي ذلك

هذا هوا مثال علي ذلك و لتحميل الكود من هنـــــا
للعلم لقد وضعت هذا الكود تحت الرخصة Public Domain اي يمكنك ان تفعل به ما تريده .

شرح الكود المستخدم في المثال

Xhtml
انشئنا Div يحتوي علي الاعلانات سميناه adsbar و Div اخر يحتوي علي بقي عناصر الصفحة سميناه Body كما ضفنا زر لاغلاق هذا الشريط الجانبي و جعلنا تنسيقة يظهر و كانه ايقونة اغلاق.

CSS
جعلنا عرض العمود الجانبي الذي سيحوي الاعلانات يمثل خمس مساحة الشاشة و باقي عناصر الصفحة تمثل اربع اخماس الشاشة
JavaScript
ما سبق كان سهلا نأتي الان للجزء المهم و لهذا ساشرح الكود بمزيد من الاهتمام.
اول شيء انشئنا دالة لتخفي العمود الجانبي الحاوي للاعلانات و اسميناها HideAds

function HideAds()
{
document.getElementById(“adsbar”).style.visibility=”hidden”
document.getElementById(“body”).style.width=”100%”

}

و كما ترون جعلتنا الجافا اسكربت قادرين علي اخبار المتصفح ان ال Div Id التي تسمي adsbar نريد ان تجعل للخاصية visibility قيمة جديدة و هي hidden
يعني باختصار ما حدث هوا ان الوضع الافتراضي لهذا الـ ID هو

Visibility: visible

قلنا للمتصفح اجعله

Visibility: hidden

و علي نفس المنوال يمكننا ان نخبر المتصفح مثلا او بتغيير اللون او ما نريد انت عرفت الان كيف تصطاد فاصطاد ما تحب.
و لكن عند اخفاء هذا الشريط الجانبي ستضل باقي الصفحة تمثل اربع اخماس الشاشة لذلك سنجعل الجافا اسكربت تخبر المتصفح ان يجعل الـ ID الذي يدعي body ذو عرض يمثل 100% من الشاشة عن طريق الامر

document.getElementById(“body”).style.width=”100%”

و علي هذا المنوال يمكنك ان تفعل ما تريد و تضيف دينامكية كبيرة لصفحتك.
صورة توضحية

و لا تنسي المثال علي ما سبق هنـــــا و لتحميل الكود من هنـــــا