يعد النص أهم الأصول وأكثرها وضوحًا لكل تطبيق أو صفحة ويب، فبدون استخدام النص لا يستطيع المبدع نقل أفكاره بشكل كامل أو توصيل المعلومات بشكل صحيح. نظرًا لحاجته وأهميته، يصبح تصميمه أيضًا كابوسًا لمعظم المطورين. بالنسبة للنص الثابت، تساعد خصائص CSS وإطار العمل الخاص بها كثيرًا، ولكن لا تزال هناك حاجة إلى خاصية يمكن تطبيقها على النمط ديناميكيًا. ولحسن الحظ، يتم توفير هذه الخاصية بواسطة جافا سكريبت التي تحمل الاسم ' com.textDecoration '.
ستوفر هذه المدونة الإجراء الخاص بتطبيق الأنماط على عنصر HTML عبر خاصية textDecoration.
كيفية تطبيق الأنماط باستخدام خاصية textDecoration لنمط HTML DOM؟
نمط DOM ' com.textDecoration 'تؤدي الخاصية بشكل أساسي التصميم مثل إضافة' تسطير، و'خط فوقي'، و'خط من خلال'، و'وميض'. 'على العنصر المحدد. هذه الخاصية عند ضبطها على ' لا أحد 'يزيل التصميم الافتراضي الذي يتم تطبيقه على هذا العنصر مثل علامة الربط.
بناء الجملة
بناء جملة خاصية textDecoration لنمط DOM هو:
eleObj. أسلوب . com.textDecoration = 'لا شيء|خط علوي|وميض|تسطير|أولي|خط من خلال|وراثة'
قم بزيارة الجدول أدناه للحصول على فكرة سريعة عن القيم التي يمكن تخصيصها لـ ' com.textDecoration ' ملكية:
| قيمة | توضيح |
|---|---|
| لا أحد | تحويل النص إلى تنسيق عادي مع إزالة كل الأنماط المحددة مسبقًا؛ هذا هو الافتراضي. |
| خط فوقي | إدراج سطر فوق النص المحدد أو فوقه. |
| رمش | يجعل النص يومض ولكنه غير مدعوم من قبل جميع متصفحات الويب. |
| تسطير | يضع السطر أسفل النص المحدد أو أسفله. |
| أولي | اضبط الخاصية المطبقة على قيمتها الافتراضية وهي لا شيء في حالتنا. |
| عبر الخط | ضع السطر في وسط النص، أي بين النص. |
| انت ورثت | يرث الخاصية المطبقة على العنصر الجذر أو الأصل. |
الآن، دعونا نلقي نظرة على عملية التنفيذ وتأثيرها على النص لكل قيمة من ' com.textDecoration ' ملكية.
مثال 1: خاصية 'textDecoration = none'.
التنفيذ العملي لـ ' com.textDecoration 'ملكية لها قيمة' لا أحد 'سيتم شرحه في الكود أدناه:
< جسم >
< مركز >
< h1 أسلوب = 'اللون: أزرق كاديت؛' > لينكس < / h1 >
< زر عند النقر = 'المطبق ()' > مطبق < / زر >
< ص > عندما يتم تعيين قيمة خاصية textDecoration على لا شيء: < / ص >
< h3 بطاقة تعريف = 'حالة الاستخدام' أسلوب = 'زخرفة النص: خط علوي؛' > العنصر المستهدف < / h3 >
< / مركز >
< النصي >
وظيفة مطبق () {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / النصي >
< / جسم >
شرح الكود المذكور أعلاه:
- أولاً، استخدم '< زر >' لإنشاء زر وتعيين مستمع حدث لـ ' عند النقر '. يقوم مستمع الحدث بتشغيل وظيفة JavaScript تسمى ' مطبق '.
- بعد ذلك، قم بإنشاء عنصر مستهدف ' h3 ' وقم بتعيين معرف فريد له ' حالة الاستخدام '. وأيضا تطبيق CSS ' زخرفة النص 'خاصية لها قيمة' خط فوقي 'بمساعدة' أسلوب ' يصف.
- الآن أدخل ' مطبق ()' نص الوظيفة وحدد العنصر المستهدف عبر المعرف الخاص به ' حالة الاستخدام 'وإرفاق النمط' com.textDecoration ' ملكية.
- بعد ذلك، قم بتعيين قيمة للخاصية ' لا أحد ' لإزالة أي تصميم لتزيين النص تم تطبيقه مسبقًا على العنصر.
عرض صفحة الويب بعد تنفيذ الكود أعلاه:
يُظهر الإخراج أن التصميم المسبق الذي تم تطبيقه على العنصر المستهدف تمت إزالته عن طريق تعيين قيمة له ' لا أحد '.
المثال 2: خاصية 'textDecoration = الأولي'.
يوضح مقتطف الكود أدناه تنفيذ ' com.textDecoration 'الخاصية عندما تكون قيمة' أولي ' تم تخصيصه له:
< النصي >وظيفة مطبق ( ) {
وثيقة. getElementById ( 'حالة الاستخدام' ) . أسلوب . com.textDecoration = 'أولي' ;
}
النصي >
يظهر أدناه الإخراج الذي تم إنشاؤه بعد تجميع الكود أعلاه:
يوضح الناتج أعلاه أن قيمة زخرفة النص مضبوطة على قيمتها الافتراضية وهي ' لا أحد 'وبالتالي تم إرجاع كل التصميم المسبق.
المثال 3: خاصية 'textDecoration = overline'.
يوضح الكود أدناه التنفيذ العملي لـ ' com.textDecoration 'الخاصية عندما تكون قيمة' خط فوقي 'ويقدم لها:
< جسم >< مركز >
< h1 أسلوب = 'اللون: أزرق كاديت؛' > لينكس < / h1 >
< زر عند النقر = 'المطبق ()' > مطبق < / زر >
< ص > عندما يتم تعيين قيمة خاصية textDecoration على الخط العلوي: < / ص >
< h3 بطاقة تعريف = 'حالة الاستخدام' > العنصر المستهدف < / h3 >
< / مركز >
< النصي >
وظيفة مطبق () {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / النصي >
< / جسم >
شرح الكود أعلاه مذكور أدناه:
- لأول مرة ' زر' و'h3 'يتم إنشاء العنصر بنفس الطريقة ويتم تطبيق خاصية CSS على “h3” تتم الآن إزالة العنصر.
- التالي داخل “ مطبق 'وظيفة يتم تحديد العنصر المستهدف و' com.textDecoration 'ملكية لها قيمة' خط فوقي 'تم تعيينه للعنصر.
يتم عرض الإخراج بعد تنفيذ الكود أعلاه أدناه:
يظهر الإخراج تأثير ' textDecoration = overline 'خاصية على النص.
المثال 4: خاصية 'textDecoration = underline'.
التنفيذ العملي للنص عند قيمة ' تسطير ' تم تعيينه لـ ' com.textDecoration الملكية مذكورة أدناه:
< النصي >وظيفة مطبق ( ) {
وثيقة. getElementById ( 'حالة الاستخدام' ) . أسلوب . com.textDecoration = 'تسطير' ;
}
النصي >
بعد التجميع، يبدو الإخراج كما يلي:
يُظهر الإخراج إضافة السطر في أسفل النص.
المثال 5: خاصية 'textDecoration = سطر من خلال'.
التنفيذ المرئي لـ ' com.textDecoration 'ملكية لها قيمة' عبر الخط 'كما هو موضح أدناه:
< النصي >وظيفة مطبق ( ) {
وثيقة. getElementById ( 'حالة الاستخدام' ) . أسلوب . com.textDecoration = 'عبر الخط' ;
}
النصي >
يتم عرض الإخراج الذي تم إنشاؤه للكود أعلاه أدناه:
يُظهر الإخراج التأثير الذي تم بواسطة ' عبر الخط ' فوق نص العنصر المستهدف.
خاتمة
نمط HTML DOM ' com.textDecoration تتعامل خاصية '' بشكل خاص مع تصميم عناصر HTML عبر JavaScript لتنفيذ التصميم الديناميكي على عناصر النص. يمكن تعيين قيم متعددة لهذا ' com.textDecoration 'لتنفيذ أشكال مختلفة من التصميم. هذه القيم ' لا شيء، و'خط علوي'، و'تسطير'، و'خط من خلال'، و'أولي'، و'وميض'، و'وراثة' '. لقد أوضحت هذه المدونة بنجاح العملية التي يمكن للمطور من خلالها تطبيق الأنماط باستخدام خاصية textDecoration.