لغة JavaScript - سلسلة دروس شرح مكتبة jQuery - شرح الدالة [ شرح الدالة CSS ] | زين العربية

لغة JavaScript سلسلة دروس شرح مكتبة jQuery - شرح الدالة [ شرح الدالة CSS ]

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,347
مستوى التفاعل
1,095
النقاط
113
الإقامة
K.S.A
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

نكمل اليوم ما بدأنها بدرس جديد فمن فاتته الدروس السابقة فيستطيع زيارة فهرس الدورة عن طريق هذا الرابط




بسم الله نبدأ الدرس:

درسنا اليوم يتحدث عن الدالة CSS

وعمل هذه الدالة تقوم بتغيير خصائص اي عنصر مثل لون وشكل ونوع الخط او لون الخلفية او التباعد بمعنى اخر تستطيع التحكم بجميع خصائص CSS عن طريق هذه الدالة

طريقة كتابة الدالة :


JavaScript:
$(selector).css({propertyName:propertyValue});
ولنشرح الكود قليلا ً للتضح الصورة

selector : هو العنصر المراد احداث التغيير عليه كما تعلمنا في الدروس السابقة
propertyName: هنا اسم الخاصية بمعنى font-size او background او color ... الخ وكما ذكرت في تعريف الدال تستطيع استخدام جميع خصائص css
propertyValue: هنا قيمة الخاصية السابقة بمعنى لو اخترت font-size تكتب هنا حجم الخط مثلا 12px وان كان لون خلفية او لون خط تكتب كود اللون مثلاً #fff

لنأخذ مثال لكي تتضح الصورة لنفرض ان لدينا div وزر ال div له خلفية بلون ازرق ونريد عند الضغط على الزر ان يتحول لون الديف من اللون الازرق الى الون الاحمر مثلاً فسوف يكون الكود كالتالي:

كود ال Html:


HTML:
<button type="button" class="btn btn-primary changeColor">
    اضغط هنا لتغيير اللون
</button>
<div id="div_color" class=" p-5 rounded" style="background-color: rgb(29, 126, 190);">
    لون ازرق
</div>
كود الjQuery:

JavaScript:
$(function() {
    $('.changeColor').click(function() {
        $('#div_color').css({"background":"#D30C5C"});
    });

});

اولاً قمنا باستخدام الدالة click والتي سبق شرحها في الدروس السابقة لاجراء التعديلات التي نريد على ال div

ثم قمنا باستخدام دالة css بعد اسناد كلاس ال div اليها والمعرف بـ
div_color

ثم قمنا باستخدام خاصية الخلفية background واسندنا لها لون محدد #D30C5C

ولكي تتضح الصورة اكثر ماذا لو اردنا تغيير لون الخط وحجمه وشكلة مع تغيير لون الخلفية فسوف يكون الكود كالتالي:

JavaScript:
$(function() {
    $('.changeColor').click(function() {
        $('#div_color').css({
            "background":"#D30C5C",
            "color":"#fff",
            "font-size":"24pt",
            "font-weight":"bold"
        });
    });

});
تلاحظون اننا قمنا باضافة الخواص كلها على طريقة المصفوفة وتستطيع اضافة اكثر من خاصية كما تحب ويمكنكم التجربة لكي تتضح لكم الصورة

اضغط هنا للذهاب الى المثال

اتمنى ان يكون الدرس واضح واي سؤال حاضرين للغالين

ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لايخطأ

وتقبلو احترامي وتقديري
اخوكم
شقاوي



 

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
3,098
مستوى التفاعل
1,829
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
بارك الله فيك اخي تركي و زادك علما و رزقك الصحة و البركة في العمر و الرزق

فقط ملاحظة اخي تركي المفروض عند الضغط على زر تغير اللون المرة الاولى يغير اللون و المرة الثانية يعيد اللون الى ما كان عليه ام هو تعمد منك لان اصلا الكود لتغير لون واحد فقط
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,347
مستوى التفاعل
1,095
النقاط
113
الإقامة
K.S.A
اللهم امي واياك اخوي محمد

بالضبط الكود لتغيير اللون مرة واحدة وهو فقط لتوضيح عمل الدالة CSS
 

Lamine

:: الأعضاء ::
إنضم
20 ديسمبر 2019
المشاركات
71
مستوى التفاعل
51
النقاط
18
الإقامة
الجزائر
شكرا أخي، درس جميل، جعله الله في ميزان حسناتك
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,347
مستوى التفاعل
1,095
النقاط
113
الإقامة
K.S.A
واياك اخوي @Lamine والعفو وتستاهلون اكثر

احترامي وتقديري
اخوك
شقاوي
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

إحصائيات المنتدى

المواضيع
1,047
المشاركات
9,420
الأعضاء
396
آخر عضو مسجل
sscx
أعلى