بعض ما يمكن أن تفعله ب div
أحد الأمثلة التي وجدتها في موقع سردال و هي
http://www.serdal.com/css/lesson/4/
حيث أنه لعب على z-index لإعطاء الطبقة الخاصة لكل div
Z-INDEX: 1 >= box1
Z-INDEX: 2 >= box2
Z-INDEX: 3 >= box3
بحيث سيظهر المحتوى على هذا الشكل
نريد عند اضغط مثلا على أي صندوق أن تظهر كطبقة أولى يعني عند الضغط على box1 ولو كانت هي السفلى فستأخد وضعية الطبقة الأولى
الطريقة:
الكود هو بغض النظر عن كود css
كود PHP:
<DIV class=box1 >box1<BR>______<BR>___<BR>______</DIV>
<DIV class=box2 >box2<BR>______<BR>___<BR>______</DIV>
<DIV class=box3 >box3<BR>______<BR>___<BR>______</DIV>
سنضيف وسطه
كود PHP:
onclick="wino(this)"
لتصبح كلها
كود PHP:
<DIV onclick="wino(this)" class=box1 >box1<BR>______<BR>___<BR>______</DIV>
<DIV onclick="wino(this)" class=box2 >box2<BR>______<BR>___<BR>______</DIV>
<DIV onclick="wino(this)" class=box3 >box3<BR>______<BR>___<BR>______</DIV>
بحيث أن wino إسم الدالة التي سوف نستدعيها مع إرسال قيمة this وهي التي سوف تربط الإتصال مع object
نفتح وسم javascript ونفتح فيه دالة wino() لكن قبل أن نفتحه يجب أن نعلن عن متغير جديد و نعطيه قيمة 4 كقيمة إبتدائية
كود PHP:
<SCRIPT LANGUAGE="JavaScript">
var z=4;
function wino(object){
لماذا z تساوي أربعة؟ لأن الطبقة الأولى في box3 يساوي فيها Z-INDEX ثلاثة أي أننا إذا أردنا طبقة أخرى أن تظهر فوقها فيجب وبالضرورة أن تكون أكبر منها
ثم سنضيف
كود PHP:
object.style.zIndex = z
كما ترون الكود واضح أي أن الأوبجيكت الذي سوف نضغط عليه سيأخد Z-INDEX الخاص به قيمة z وهي 4
و أيضا ستلاحظون أن Z-INDEX في جافاسكريبت تكتب zIndex وليست مثل CSS
أمثلة أخرى
BORDER-TOP تكتب borderTop
BACKGROUND-COLOR تكتب backgroundTop
كما لاحظتم أن علامة - تحدف لأن جافاسكريبت وأية لغة برمجة أخرى ستحسبها علامة ناقص
كود PHP:
object.style.Z-INDEX = z
أي object.style.Z ناقص INDEX = z 
غير مقبولة بتاتا
نعود لإكمال الكود
قبل أن نغلق الدالة wino نضيف z++ أي أن المتغير سيضاف له رقم واحد ليصبح 5 هذا حتى إذا ما تم إستدعاء الدالة من جديد تكون ل z قيمة أكبر من أي Z-INDEX موجودة بالصفحة
و سوف تكون النتيجة الكاملة
كود PHP:
<SCRIPT LANGUAGE="JavaScript">
var z=4;
function wino(object){
object.style.zIndex = z
z++
}
</SCRIPT>
مثال على السكريبت
جرب أن تضغط على الصناديق
أتمنى ان أكون قد أوصلت شيئا رغم بعض التعابير التي قد تكون خانتني
هناك عدة أشياء يمكن فعلها ل div ب javascript على إيقاع CSS
و السلام
