كيفية تغيير لون النص في جافا سكريبت

Kyfyt Tghyyr Lwn Alns Fy Jafa Skrybt



JavaScript هي لغة ديناميكية توفر خيارات برمجة متنوعة لأداء مهام متعددة. على سبيل المثال ، يعد تغيير لون العنصر من أكثر المهام شيوعًا أثناء تطوير موقع الويب. للقيام بذلك ، أولاً ، احصل على المرجع لعنصر HTML الذي تريد تغيير اللون ، ثم قم بتعيين قيمة اللون له في سمة لون نمط JavaScript.

ستوضح هذه الدراسة طرق تغيير لون النص في JavaScript.

كيفية تغيير لون النص في JavaScript؟

لتغيير لون النص في JavaScript ، استخدم طرق JavaScript المحددة مسبقًا المذكورة أدناه:







دعونا نشرح هذه الأساليب بشكل فردي.



الأسلوب 1: تغيير لون النص باستخدام خاصية style.color مع أسلوب getElementById ()

لتغيير لون النص ، يمكنك استخدام ' getElementById () 'مع' النمط. اللون ' منشأه. في مثل هذا السيناريو ، يمكن الوصول إلى عنصر النص باستخدام طريقة getElementById () ثم تطبيق سمة اللون بمساعدة خاصية HTML style.color.



بناء الجملة





استخدم بناء الجملة المحدد لتغيير لون النص باستخدام خاصية اللون بمساعدة طريقة getElementById ():

وثيقة. getElementById ( 'هوية شخصية' ) . نمط . اللون = 'اللون' ؛

ال ' هوية شخصية 'هو معرف العنصر المحدد للوصول إلى عنصر النص ثم تغيير لونه باستخدام الخاصية style.color.



توجه إلى المثال أدناه لفهم المفهوم المذكور!

مثال

أولاً ، سننشئ عنوانًا باستخدام

علامة وتعيين معرف ' هوية شخصية 'الذي يتم استخدامه للوصول إلى عنصر h4 ، ثم أنشئ زرًا يستدعي وظيفة تسمى' غير اللون() 'المحدد في ملف JavaScript (JS) عند تشغيل حدث onclick للزر المضاف:

< معرف h4 = 'هوية شخصية' > مرحبًا بك في LinuxHint h4 >

< نوع الزر = 'زر' عند النقر = 'غير اللون()' > انقر لرؤية السحر زر >

في ملف JS ، حدد وظيفة تسمى ' غير اللون() 'والحصول على العنوان بتمرير معرفه إلى طريقة getElementById () ثم تغيير لونه:

تغيير الوظيفة ( ) {

وثيقة. getElementById ( 'هوية شخصية' ) . نمط . اللون = 'أحمر' ؛

}

أخيرًا ، حدد مصدر ملف JavaScript باستخدام علامة src في ملف HTML:

< النصي src = './JSfile.js' > النصي >

يتضح من الإخراج أنه عند النقر فوق الزر المضاف ، قام عنصر النص بتغيير لونه إلى ' أحمر ':

دعونا نتحقق من الطريقة الأخرى!

الطريقة 2: تغيير لون النص باستخدام خاصية style.color مع أسلوب querySelector ()

يمكنك أيضًا تغيير لون النص باستخدام الزر ' محدد الاستعلام () 'مع خاصية style.color. يصل إلى العنصر مع كل من المعرف أو الفئة المعينة بينما تقوم طريقة getElementById () فقط بجلب العنصر بالمعرف المخصص له.

بناء الجملة

استخدم بناء الجملة التالي لتغيير لون النص باستخدام خاصية اللون بمساعدة طريقة querySelector ():

وثيقة. الاستعلام ( 'id / className' ) . نمط . اللون = 'اللون' ؛

مثال

هنا ، سوف نستخدم ملف

علامة لإضافة فقرة بالفئة المسماة ' اللون '، سيساعد ذلك في الوصول إلى عنصر

والزر الذي سيستدعي JavaScript' غير اللون() 'عندما يتم تشغيل حدث onclick الخاص به:

< ص صف دراسي = 'اللون' > مرحبًا بك في LinuxHint ص >

< زر عند النقر = 'غير اللون()' > انقر لرؤية السحر زر >

في تعريف ' غير اللون() '، سوف نستدعي' محدد الاستعلام () 'بتمرير اسم الفئة بالنقطة (.) التي تشير إلى الوصول إلى العنصر بناءً على اسم الفئة الخاصة به ، ثم تطبيق خاصية اللون عليه:

تغيير الوظيفة ( ) {

وثيقة. الاستعلام ( '.اللون' ) . نمط . اللون = 'أرجواني' ؛

}

ومع ذلك ، لاستخدام معرف في عنصر HTML والوصول إليه باستخدام طريقة querySelector () ، أضف ' # 'التوقيع باسم المعرف:

وثيقة. الاستعلام ( '#اللون' ) . نمط . اللون = 'أرجواني' ؛

انتاج |

لقد جمعنا أبسط طريقة لتغيير لون النص في JavaScript.

استنتاج

لتغيير لون النص ، يمكنك استخدام خاصية style.color بمساعدة طريقة getElementById () أو طريقة querySelector (). يتم استخدام طريقة getElementById () للوصول إلى عنصر HTML بناءً على المعرف المخصص له ، بينما يصل أسلوب querySelector () إلى العنصر بناءً على المعرف المعين أو الفئة عن طريق تحديد العلامات (#) أو (.) على التوالي. أوضحت هذه الدراسة الإجراء البسيط لتغيير لون النص في JavaScript.