متن ہر ایپلیکیشن یا ویب پیج کے لیے سب سے اہم اور سب سے زیادہ نظر آنے والا اثاثہ ہے، متن کے استعمال کے بغیر تخلیق کار اپنے خیالات کو مکمل طور پر بیان نہیں کر سکتا اور نہ ہی صحیح طریقے سے معلومات فراہم کر سکتا ہے۔ اپنی ضرورت اور اہمیت کی وجہ سے اس کا اسٹائل بھی زیادہ تر ڈویلپرز کے لیے ایک ڈراؤنا خواب بن جاتا ہے۔ جامد متن کے لیے، سی ایس ایس کی خصوصیات اور اس کا فریم ورک بہت مدد کرتا ہے لیکن پھر بھی، ایسی خاصیت کی ضرورت ہے جو متحرک طور پر طرز پر لاگو ہو سکے۔ خوش قسمتی سے، یہ پراپرٹی جاوا اسکرپٹ کے ذریعہ فراہم کی گئی ہے جس کا نام ہے ' ٹیکسٹ ڈیکوریشن '
یہ بلاگ ٹیکسٹ ڈیکوریشن پراپرٹی کے ذریعے HTML عنصر پر سٹائل کو لاگو کرنے کا طریقہ کار فراہم کرے گا۔
ایچ ٹی ایم ایل ڈوم اسٹائل ٹیکسٹ ڈیکوریشن پراپرٹی کا استعمال کرتے ہوئے اسٹائلز کا اطلاق کیسے کریں؟
DOM طرز ' ٹیکسٹ ڈیکوریشن 'پراپرٹی بنیادی طور پر اسٹائلنگ کرتی ہے جیسے شامل کرنا' انڈر لائن'، 'اوور لائن'، 'لائن تھرو'، اور 'پلک جھپکنا 'ایک منتخب عنصر پر۔ یہ خاصیت جب ' کوئی نہیں ” پہلے سے طے شدہ اسٹائل کو ہٹاتا ہے جو اس عنصر پر اینکر ٹیگ کی طرح لاگو ہوتا ہے۔
نحو
DOM اسٹائل ٹیکسٹ ڈیکوریشن پراپرٹی کا نحو یہ ہے:
eleObj انداز . ٹیکسٹ ڈیکوریشن = 'کوئی نہیں | اوور لائن | جھپک | انڈر لائن
ان اقدار کے بارے میں فوری خیال حاصل کرنے کے لیے نیچے دیے گئے جدول پر جائیں جو ' ٹیکسٹ ڈیکوریشن جائیداد:
| قدر | وضاحت |
|---|---|
| کوئی نہیں | تمام پہلے سے طے شدہ اسٹائل کو ہٹاتے ہوئے متن کو سادہ شکل میں تبدیل کریں۔ یہ پہلے سے طے شدہ ہے. |
| اوور لائن | منتخب متن کے اوپر یا اوپر ایک لائن داخل کرتا ہے۔ |
| پلک جھپکنا | متن کو جھپکتا ہے لیکن یہ تمام ویب براؤزرز کے ذریعہ تعاون یافتہ نہیں ہے۔ |
| انڈر لائن | یہ منتخب متن کے نیچے یا نیچے لائن رکھتا ہے۔ |
| ابتدائی | لاگو پراپرٹی کو اس کی ڈیفالٹ ویلیو پر سیٹ کریں جو ہمارے معاملے میں کوئی نہیں ہے۔ |
| لائن کے ذریعے | لکیر کو متن کے بیچ میں رکھیں یعنی متن کے درمیان۔ |
| تم وارث ہو | روٹ یا پیرنٹ عنصر پر لاگو پراپرٹی کو وراثت میں ملتا ہے۔ |
اب، آئیے عمل درآمد کے عمل پر ایک نظر ڈالتے ہیں اور 'کی ہر قدر کے متن پر اس کے اثرات' ٹیکسٹ ڈیکوریشن ' جائیداد.
مثال 1: 'ٹیکسٹ ڈیکوریشن = کوئی نہیں' پراپرٹی
کا عملی نفاذ' ٹیکسٹ ڈیکوریشن 'جائیداد کی قیمت' کوئی نہیں ذیل کے کوڈ میں وضاحت کی جائے گی۔
< جسم >
< مرکز >
< h1 انداز = 'رنگ: کیڈٹ بلیو؛' > لینکس < / h1 >
< بٹن کلک پر = 'Applier()' > لگانے والا < / بٹن >
< ص > جب ٹیکسٹ ڈیکوریشن پراپرٹی کی قدر کوئی نہیں پر سیٹ کی جاتی ہے: < / ص >
< h3 آئی ڈی = 'استعمال کیس' انداز = 'متن کی سجاوٹ: اوور لائن؛' > ہدف شدہ عنصر < / h3 >
< / مرکز >
< سکرپٹ >
فنکشن Applier() {
document.getElementById('useCase').style.textDecoration = 'کوئی نہیں'؛
}
< / سکرپٹ >
< / جسم >
اوپر بیان کردہ کوڈ کی وضاحت:
- سب سے پہلے، ایک '< بٹن >' بٹن بنانے کے لیے ٹیگ کریں اور اسے ایک ایونٹ سننے والا تفویض کریں' کلک پر ' یہ واقعہ سننے والا جاوا اسکرپٹ فنکشن کو متحرک کرتا ہے جس کا نام ' لگانے والا '
- اگلا، ایک ہدف شدہ عنصر بنائیں ' h3 'اور اسے ایک منفرد آئی ڈی تفویض کریں' useCase ' اس کے علاوہ، CSS لاگو کریں ' متن کی سجاوٹ 'اس کی جائیداد کی قیمت ہے' اوور لائن 'کی مدد سے' انداز ' وصف.
- اب، درج کریں ' لگانے والا ()' فنکشن باڈی کو منتخب کریں اور اس کی آئی ڈی کے ذریعے ہدف شدہ عنصر کو منتخب کریں۔ useCase 'اور انداز منسلک کریں' ٹیکسٹ ڈیکوریشن ' جائیداد.
- اس کے بعد، پراپرٹی کو 'کی قدر تفویض کریں کوئی نہیں عنصر پر پہلے سے لاگو ٹیکسٹ ڈیکوریشن اسٹائل کو ہٹانے کے لیے۔
مندرجہ بالا کوڈ کے نفاذ کے بعد ویب پیج کا منظر:
آؤٹ پٹ اس پری اسٹائل کو ظاہر کرتا ہے جو ہدف شدہ عنصر پر لاگو ہوتا ہے اسے 'کی قدر تفویض کرکے ہٹا دیا جاتا ہے۔ کوئی نہیں '
مثال 2: 'ٹیکسٹ ڈیکوریشن = ابتدائی' پراپرٹی
ذیل میں کوڈ کا ٹکڑا 'کے نفاذ کی وضاحت کرتا ہے۔ ٹیکسٹ ڈیکوریشن ' جائیداد جب ' کی قدر ابتدائی 'اس کو تفویض کیا گیا ہے:
< سکرپٹ >فنکشن لگانے والا ( ) {
دستاویز getElementById ( 'استعمال کیس' ) . انداز . ٹیکسٹ ڈیکوریشن = 'ابتدائی' ;
}
سکرپٹ >
مندرجہ بالا کوڈ کی تالیف کے بعد پیدا ہونے والا آؤٹ پٹ ذیل میں دکھایا گیا ہے:
مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ ٹیکسٹ ڈیکوریشن کی ویلیو اس کی ڈیفالٹ ویلیو پر سیٹ ہے جو کہ ' کوئی نہیں اور اس لیے تمام پری اسٹائل کو واپس کر دیا گیا ہے۔
مثال 3: 'ٹیکسٹ ڈیکوریشن = اوور لائن' پراپرٹی
ذیل کا کوڈ اس کے عملی نفاذ کو ظاہر کرتا ہے ' ٹیکسٹ ڈیکوریشن ' جائیداد جب ' کی قدر اوور لائن 'اس کو فراہم کیا جاتا ہے:
< جسم >< مرکز >
< h1 انداز = 'رنگ: کیڈٹ بلیو؛' > لینکس < / h1 >
< بٹن کلک پر = 'Applier()' > لگانے والا < / بٹن >
< ص > جب ٹیکسٹ ڈیکوریشن پراپرٹی کی قدر اوور لائن پر سیٹ کی جاتی ہے: < / ص >
< h3 آئی ڈی = 'استعمال کیس' > ہدف شدہ عنصر < / h3 >
< / مرکز >
< سکرپٹ >
فنکشن Applier() {
document.getElementById('useCase').style.textDecoration = 'اوور لائن'؛
}
< / سکرپٹ >
< / جسم >
مندرجہ بالا کوڈ کی وضاحت ذیل میں بیان کی گئی ہے:
- سب سے پہلے، ' بٹن' اور 'h3 عنصر اسی طریقے سے بنایا گیا ہے اور سی ایس ایس پراپرٹی جو اوپر لاگو ہوتی ہے۔ 'h3' عنصر اب ہٹا دیا گیا ہے.
- اگلا، اندر ' لگانے والا ' فنکشن ہدف شدہ عنصر کو منتخب کیا جاتا ہے اور ' ٹیکسٹ ڈیکوریشن 'جائیداد کی قیمت' اوور لائن ' عنصر کو تفویض کیا گیا ہے۔
مندرجہ بالا کوڈ کے نفاذ کے بعد آؤٹ پٹ نیچے دکھایا گیا ہے:
آؤٹ پٹ کا اثر دکھاتا ہے ' ٹیکسٹ ڈیکوریشن = اوور لائن متن کے اوپر پراپرٹی۔
مثال 4: 'ٹیکسٹ ڈیکوریشن = انڈر لائن' پراپرٹی
متن کا عملی نفاذ جب 'کی قدر انڈر لائن 'کو تفویض کیا گیا ہے' ٹیکسٹ ڈیکوریشن ' جائیداد ذیل میں بیان کی گئی ہے:
< سکرپٹ >فنکشن لگانے والا ( ) {
دستاویز getElementById ( 'استعمال کیس' ) . انداز . ٹیکسٹ ڈیکوریشن = 'انڈر لائن' ;
}
سکرپٹ >
تالیف کے بعد، آؤٹ پٹ اس طرح نظر آتا ہے:
آؤٹ پٹ سے پتہ چلتا ہے کہ متن کے نیچے لائن شامل کی گئی ہے۔
مثال 5: 'ٹیکسٹ ڈیکوریشن = لائن تھرو' پراپرٹی
کا بصری نفاذ ' ٹیکسٹ ڈیکوریشن 'کی قیمت والی جائیداد' لائن کے ذریعے ذیل میں دکھایا گیا ہے:
< سکرپٹ >فنکشن لگانے والا ( ) {
دستاویز getElementById ( 'استعمال کیس' ) . انداز . ٹیکسٹ ڈیکوریشن = 'لائن تھرو' ;
}
سکرپٹ >
مندرجہ بالا کوڈ کے لیے تیار کردہ آؤٹ پٹ نیچے دکھایا گیا ہے:
آؤٹ پٹ اس اثر کو ظاہر کرتا ہے جو ' لائن کے ذریعے 'ہدف بنائے گئے عنصر کے متن کے اوپر۔
نتیجہ
ایچ ٹی ایم ایل ڈوم اسٹائل ' ٹیکسٹ ڈیکوریشن پراپرٹی خاص طور پر جاوا اسکرپٹ کے ذریعے HTML عناصر کے اسٹائل سے متعلق ہے تاکہ ٹیکسٹ عناصر پر ڈائنامک اسٹائلنگ کی جاسکے۔ اس کے لیے متعدد اقدار تفویض کی جا سکتی ہیں۔ ٹیکسٹ ڈیکوریشن اسٹائل کے مختلف تغیرات کو انجام دینے کے لیے۔ یہ اقدار ہیں ' کوئی نہیں'، 'اوور لائن'، 'انڈر لائن'، 'لائن تھرو'، 'ابتدائی'، 'پلک'، اور 'وراثت ' اس بلاگ نے کامیابی کے ساتھ اس عمل کی وضاحت کی ہے جس کے ذریعے ڈویلپر ٹیکسٹ ڈیکوریشن پراپرٹی کا استعمال کرتے ہوئے اسٹائل کا اطلاق کر سکتا ہے۔