التحويل من 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

للكاتب Zizwar

  • Share/Bookmark

التعليقات (8) على ”التحويل من CSS إلى JavaScript“

  1. مشكور أخي ولكن البعض يقول الإنتقال من jc إلى css والبعض يقزل العكس.
    فماذا أستعمل الأن؟؟؟؟؟؟
    مشكور على كل حال

  2. اخي د سفيان

    الخيار لك فمثلا استخدم الجافا سكريبت اذا كنت تريد تغيير خصائص الصفحة ديناميكيا او تريد مزيد من السهولة باستخدام اجاكس

  3. وليد

    السلام عليكم

    شكلك يا زيزوار تبي تميل بنا الى الجافا :)

    لكن الا تعتقد ان الـ CSS افضل واسهل من الناحية التنسيق

    خلي الجافا للأمور الثانيه :)

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

  5. asaamas

    أفدتنا كثيراً .. جزاك الله خيراً

  6. طريقه رائعه وفكرة جميله لكن هل بنا بأمثله حيه لتجربة التطبيق

  7. مشكور ياغالي

  8. جزاك الله خير ونفع بك ، شكراً لك اخي الكريم

أضف تعليقك




يمكنك استخدام الوسوم التالية في التعليق: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


* حقول مطلوبة