التحويل من CSS إلى JavaScript
مدرج تحت قسم: دروس
20
يناير
2007
هذه لائحة بأهم أوامر CSS وما يقابلها من أشباهها في JavaScript.
مثال:
لتحويل الـbackground-color في CSS إلى JavaSctript سنزيل علامة – ونكبّر الحرف الذي يليها لتصبح backgroundColor، وهذا حتى نتحكم بها من خلال الجافاسكريبت.
طريقة الإستعمال:
- في Internet Explorer :
document.all.id.style.backgroundColor = "القيمة";
- في NetScape :
document.id.style.backgroundColor = "القيمة";
- في كل المتصفحات القياسية :
document.getElementById("id").style.backgroundColor = "القيمة";
- وهنا الـid نعطيه للوسم الذي نريد التحكم في تنسيقه، والكود التالي يبيّن ذلك (الجهة اليسرى CSS أما اليمنى فهي JavaScript) :
background » background background-attachment » backgroundAttachment background-color » backgroundColor background-image » backgroundImage background-position » backgroundPosition background-repeat » backgroundRepeat border » border border-bottom » borderBottom border-bottom-color » borderBottomColor border-bottom-style » borderBottomStyle border-bottom-width » borderBottomWidth border-color » borderColor border-left » borderLeft border-left-color » borderLeftColor border-left-style » borderLeftStyle border-left-width » borderLeftWidth border-right » borderRight border-right-color » borderRightColor border-right-style » borderRightStyle border-right-width » borderRightWidth border-style » borderStyle border-top » borderTop border-top-color » borderTopColor border-top-style » borderTopStyle border-top-width » borderTopWidth border-width » borderWidth clear » clear clip » clip color » color cursor » cursor display » display filter » filter font » font font-family » fontFamily font-size » fontSize font-variant » fontVariant font-weight » fontWeight height » height left » left letter-spacing » letterSpacing line-height » lineHeight list-style » listStyle list-style-image » listStyleImage list-style-position » listStylePosition list-style-type » listStyleType margin » margin margin-bottom » marginBottom margin-left » marginLeft margin-right » marginRight margin-top » marginTop overflow » overflow padding » padding padding-bottom » paddingBottom padding-left » paddingLeft padding-right » paddingRight padding-top » paddingTop page-break-after » pageBreakAfter page-break-before » pageBreakBefore position » position float » styleFloat text-align » textAlign text-decoration » textDecoration text-decoration: blink » textDecorationBlink text-decoration: line-through » textDecorationLineThrough text-decoration: none » textDecorationNone text-decoration: overline » textDecorationOverline text-decoration: underline » textDecorationUnderline text-indent » textIndent text-transform » textTransform top » top vertical-align » verticalAlign visibility » visibility width » width z-index » zIndex


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