الدعوة عامة لحضور العرض الأول التجريبي لسوالف كاست
ويكيمانيا 2008. الإسكندرية، من 17 وحتى 19 يوليو

 

العودة   سوالف سوفت > قسم تطوير وبرمجة المواقع للمتقدمين > ويب 2.0 و البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها
المدوّنات البحث مشاركات اليوم اجعل كافة المشاركات مقروءة

رد
 
LinkBack أدوات الموضوع
خبير JavaScript
تاريخ التسجيل: Jul 2002-
Blog Entries: 15
#1 (permalink)  
التحويل من CSS الى JavaScript


السلام عليكم

هذه لا ئحة بأهم مراجع CSS وتحويلها الى JavaScript
مثال
بال background-color بال CSS لتحويلها الى الجافاسكريبت سنزيل علامة - ونكبر الحرف اذي يليها لتصبح backgroundColor
هذا حتى نتحكم بها من خلال الجافاسكريبت، طريقة الإستعمال
في انترنت اكسبلورر
كود PHP:
document.all.id.style.backgroundColor "القيمة"
ولنتسكيب
كود PHP:
document.id.style.backgroundColor "القيمة"
و لكل المتصفحات القياسية
كود PHP:
document.getElementById("id").style.backgroundColor "القيمة"
وهنا ال id هي تعرفة المعلم التي نعطيها للوسم الذي نريد ان نتحكم في تنسيقه
وهذه هي الائحة، على اليسار بال CSS في اليمين بال JavaScript
كود PHP:
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
-decorationblink ->-> textDecorationBlink
text
-decorationline-through ->-> textDecorationLineThrough
text
-decorationnone ->-> textDecorationNone
text
-decorationoverline ->-> textDecorationOverline
text
-decorationunderline ->-> textDecorationUnderline
text
-indent ->-> textIndent
text
-transform ->-> textTransform
top 
->-> top
vertical
-align ->-> verticalAlign
visibility 
->-> visibility
width 
->-> width
z
-index ->-> zIndex 






Zizwar غير متواجد حالياً   قديم 14-10-2006, 10:41 PM
رد مع اقتباس
عضو نشيط جدا
تاريخ التسجيل: May 2006-
#2 (permalink)  

حلو يا زيزوار ما شاء الله
هذه الصفحه ساطبعها واستخدمها كمرجع
شكرا لك






ابو الويس غير متواجد حالياً   قديم 14-10-2006, 11:02 PM
رد مع اقتباس
عضو سوبر نشيط
تاريخ التسجيل: Aug 2004-
#3 (permalink)  

معلومة جديدة ومفيدة اخوي زيزوار
ياحبذا لو تعطينا تطبيق عملي بسيط على كيفية تغيير background في الـ css
من
background-image: url("images/bg_2.jpg");
إلى الجافا






مشراق غير متواجد حالياً   قديم 15-10-2006, 06:48 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: May 2006-
#4 (permalink)  

جزاك الله خيرا أخي زيزوار

أما بالنسبة لسؤاك أخي مشراق، فأنا لم أجربه للتأكد ولكني كتبته على السريع أتمنى أنه يشتغل،
كود بلغة HTML:
document.getElementById('elID').backgroundImage  = 'URI to ur image';






__________________
------------------------
Moving with the web 2.0h era
Bo3oof غير متواجد حالياً   قديم 16-10-2006, 02:21 PM
رد مع اقتباس
خبير JavaScript
تاريخ التسجيل: Jul 2002-
Blog Entries: 15
#5 (permalink)  

بارك الله فيكم
وشكرا للتوضيح أبوعوف
أخي المشراق هذه هي القاعدة
اتبع القاعدة التي فوق، وغير علامة : الى = أحصر القيمة بين علامتي التنصيص
كود PHP:
document.getElementById('elID').backgroundImage 'url("images/bg_2.jpg")'






Zizwar غير متواجد حالياً   قديم 16-10-2006, 02:27 PM
رد مع اقتباس
رد


أدوات الموضوع

تعليمات المشاركة
لا تستطيع كتابة مواضيع
لا تستطيع كتابة ردود
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة



الساعة الآن: 02:51 PM بتوقيت المملكة العربية السعودية