شوّيت: شبكة كرة قدم اجتماعية




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

الوسوم:

الرد على الموضوع
 
LinkBack أدوات الموضوع
عضو نشيط
#1  
هل تستطيع الجافاسكربت تغيير محتوى عنصر في css

مثلاً لو لدي مستند css فيه التالي:

كود HTML:
p.flashingText
{
color:red;
}
هل أستطيع تغيير محتواه؟






WebDeveloper is offline   قديم 06-10-2006, 03:46 PM
الرد مع إقتباس
خبير JavaScript
المدخلات في المدونات: 15
#2  

نعم تستطيع تغيير محتواه، لكن يجب ان تعرف إسم المعرف للوسم، فلو كان الوسم
كود PHP:
<class="flashingText" id="WebDeveloper">المحتوى</p
اسم المعرف هنا هو WebDeveloper
من خلال الجافاسكريبت وبإعتماد تقنية dom سنغير المحتوى بهذا السطر
كود PHP:
document.getElementById("WebDeveloper").style.color "black"
هناك طرق أخرى لكن هذه هي القياسية






Zizwar is offline   قديم 06-10-2006, 07:59 PM
الرد مع إقتباس
عضو نشيط
#3  

ربما لم أوفق بتوضيح المسألة جيداً..

كنت أهدف لعمل تأثير فلاشنغ "وميض بالعربي على ما اعتقد يسمونه" من خلال المبادلة بين لونين على حسب الوقت وكتبته كالتالي:


كود PHP:
<script type="text/javascript">
var 
isCase=1;
function 
FlashingText()
{
var 
TargetTextdocument.getElementById("WebDeveloper")
if(
isCase==1)
{
TargetText.style.color="white"

isCase=0;
t=200;
}
else
{
TargetText.style.color="red"


isCase=1;
t=200;
}

setTimeout("FlashingText()",t)
}
</script>

 <p class="flashingText" id="WebDeveloper">المحتوى</p>  
...
...

<script type="text/javascript">
FlashingText()
</script> 
والكود يشتغيل تمام، لكن حين أريد تطبيقه على لقب عضو في برنامج منتدى على سبيل المثال..
بحيث أجعل تأثير الفالشنغ ظاهر على لقب أعضاء معينين فإنه ستكون هناك مشكلة في حال أضاف العضو نفسه أكثر من مشاركة لموضوع ما والسبب إنه في كل مرة سيضاف فيها لقبه فإن نفس الـ id سوف يضاف من جديد وكما تعلم أستاذنا الكريم فإن ذلك غير صحيح لأن الآيدي يفترض أن يرتبط بعنصر واحد فقط ولذلك فالتأثير لا يعمل إلا على عنصر واحد.

فخيل إلي أنه لو أمكن تغيير محتوى العنصر في css نفسه كالتالي مثلا:
document.css.flashingText="color:red;"
لأمكننا تلافي تلك المشكلة، تقبى هذه فكرة مبرمج مبتدئ في عالم الجافاسكربت وربما لديكم أو لدى الأخوة المحترفين حلولاً بديلة.

وأشكر لك التعاطي مع الموضوع.
وأعانكم الله على إدارة هذا القسم وإنجاحه.

تحياتي
WebDeveloper






WebDeveloper is offline   قديم 06-10-2006, 09:48 PM
الرد مع إقتباس
خبير JavaScript
المدخلات في المدونات: 15
#4  

اولا غير الدالة setTimeout بالدالة الجديدة setIntervel
وسنعتمد على المقبظ document.getElementsByTagName للوصول الى وسوم الفقرات("p")
ومن خلال الدالة التكرارية (for) سنتحكم في جميع الوسوم التي لها التعريفة "WebDeveloper"
بهذا سنتحكم في جميع الوسوم التي لها تعريفة موحدة
الكود كاملا
كود PHP:
<script type="text/javascript">
<!--
var 
timer 1000// 1000 = 1sec
window.onload = function(){
var 
wino document.getElementsByTagName("p");
    
window.setInterval(function(){
    for(var 
i=0i<wino.lengthi++){
        if(
wino[i].id == "WebDeveloper"){
            if(
wino[i].style.color == "red")                    
                
wino[i].style.color "white";
                    else
                
wino[i].style.color "red";
            }
        }
    },
timer);
}
//www.wino.ws * script@wino.ws
//-->
</script>

 <p class="flashingText" id="WebDeveloper">WebDeveloper</p>  
  <p class="flashingText" id="wino">wino</p> 
   <p class="flashingText" id="WebDeveloper">WebDeveloper</p> 
    <p class="flashingText" id="WebDeveloper">WebDeveloper</p>  
     <p class="flashingText" id="wino">wino</p> 
      <p class="flashingText" id="WebDeveloper">WebDeveloper</p> 
لاحظ ان الكود سيغير الوان وسوم الفقرات التي لها المعلم "WebDeveloper"
يستحسن انزاله من المرفقات






الملفات المرفقة
نوع الملف: txt WebDeveloper2.html.txt‏ (807 بايت, 46 مشاهدة)
Zizwar is offline   قديم 07-10-2006, 03:34 AM
الرد مع إقتباس
مشرف قسم PHP
#5  

نعم يمكن ... بشكل عام جميع وسوم html تعتبر كائنات تستطيع الوصول الى خصائصها وتغير قيمها

يمكن الوصول الى انماط الصفحه من خلال هذه المصفوفه
كود:
document.styleSheets;
ومن خلال هذه المصفوفه ستصل الى خصائص كل نمط
كود:
document.styleSheets[0].cssRules
ويهمنا هنا لتغيير خاصية في النمط الخاصية (ملخبط في المسميات) style والتى اعتدنا عليها في الوسوم الاخرى
كود:
document.styleSheets[0].cssRules[1].style.color="green";
امل ان تكون الفكره وصلت ... اذا كنت مهتم بالجافا اسكربت ... فيجب عليك تركيب متصفح فايرفوكس مع تنزيل الملحق فايربق FireBug
من هنا http://www.joehewitt.com/software/firebug/
الذي سيجعل خبير جافاسكربت في دقائق امل ان يتبرع احدهم بشرحه هنا






__________________
ضيف الله العتيبي مبرمج حر و مهندس معتمد من زيند (ZCE)
الاتصال: daif@daif.net او جوال: 0556639884
الخدمات: تقديم استشارات برمجيه, تطوير بوابات/خدمات إلكترونيه للقطاع العام او الخاص .
daif is offline   قديم 07-10-2006, 10:51 AM
الرد مع إقتباس
عضو نشيط
#6  

شكراً لك أخي Zizwar الكود أدى المطلوب تماماً.
وشكراً لك أخي daif على الطريقة الأخرى وعلى البرنامج، وأنا بصدد تجربته فهو يبدو مفيداً جداً خصوصاً وأن الانترنت اكسبلورر لا يعطيك فكرة واضحة عن سبب أخطاء الجافاسكربت

تحياتي لكما






WebDeveloper is offline   قديم 07-10-2006, 01:01 PM
الرد مع إقتباس
الرد على الموضوع


 

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

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

كود vB متاح
كود [IMG] متاح
كود HTML غير متاح
Trackbacks are متاح
Pingbacks are متاح
Refbacks are متاح



جميع الأوقات بتوقيت غرينتش +3. الوقت الآن هو 08:57 AM.