یہ مضمون JavaScript کے ساتھ CSS کو شامل کرنے کے طریقوں کی وضاحت کرے گا۔
جاوا اسکرپٹ کے ساتھ سی ایس ایس کیسے شامل کریں؟
JavaScript میں، آپ مندرجہ ذیل طریقوں یا طریقوں کا استعمال کرتے ہوئے کسی عنصر کی طرز کی خاصیت میں ترمیم کرکے CSS اسٹائلز کو شامل کرسکتے ہیں:
- اسٹائل پراپرٹی ان لائن اسٹائل کے بطور
- setAttribute() طریقہ ان لائن اسٹائل کے بطور
- createElement() طریقہ عالمی اسٹائل کے طور پر
طریقہ 1: 'سٹائل' پراپرٹی کا استعمال کرتے ہوئے جاوا اسکرپٹ کے ساتھ CSS شامل کریں۔
جاوا اسکرپٹ میں سی ایس ایس شامل کرنے کے لیے، ' انداز ' جائیداد. اس کا استعمال کسی عنصر کے ان لائن اسٹائل تک رسائی اور جوڑ توڑ کے لیے کیا جاتا ہے۔ یہ ایک ایسی چیز دیتا ہے جو کسی عنصر کے ان لائن اسٹائل کی نمائندگی کرتا ہے اور کسی کو انفرادی طرز کی خصوصیات حاصل کرنے یا سیٹ کرنے کی اجازت دیتا ہے۔
نحو
جاوا اسکرپٹ میں سی ایس ایس اسٹائل کو شامل کرنے کے لیے، درج ذیل نحو کو استعمال کیا جاتا ہے۔ انداز جائیداد:
عنصر انداز ;
یہاں، ' عنصر ” ایک HTML عنصر کا حوالہ ہے۔
مثال
درج ذیل مثال میں، ہم جاوا اسکرپٹ کا استعمال کرتے ہوئے بٹنوں کو اسٹائل کریں گے۔ سب سے پہلے، ہم تین بٹن بنائیں گے اور انہیں آئی ڈی تفویض کریں گے، جو اسٹائل کے لیے بٹن کے عناصر تک رسائی میں مدد کرتا ہے:
< بٹن آئی ڈی = 'btn2' > رد کرنا بٹن >
< بٹن آئی ڈی = 'btn3' > قبول کریں۔ بٹن >
اسٹائل کرنے سے پہلے آؤٹ پٹ اس طرح نظر آئے گا:
اب، آئیے جاوا اسکرپٹ میں ان بٹنوں کو ' انداز ' جائیداد. سب سے پہلے، بٹن کے تمام عناصر کو ان کی تفویض کردہ آئی ڈیز کا استعمال کرتے ہوئے حاصل کریں۔ getElementById() طریقہ:
متفق ہونے دو = دستاویز getElementById ( 'btn1' ) ;مسترد کر دو = دستاویز getElementById ( 'btn2' ) ;
قبول کرنے دو = دستاویز getElementById ( 'btn3' ) ;
ان تمام بٹنوں کے پس منظر کا رنگ سیٹ کریں انداز جائیداد:
متفق انداز . پس منظر کا رنگ = 'سبز' ;مسترد انداز . پس منظر کا رنگ = 'سرخ' ;
قبول کریں انداز . پس منظر کا رنگ = 'پیلا' ;
جیسا کہ آپ دیکھ سکتے ہیں، بٹنوں کو 'کا استعمال کرتے ہوئے کامیابی کے ساتھ اسٹائل کیا گیا ہے۔ انداز جائیداد:
طریقہ 2: 'setAttribute()' طریقہ استعمال کرتے ہوئے JavaScript کے ساتھ CSS شامل کریں۔
جاوا اسکرپٹ میں سی ایس ایس اسٹائلنگ شامل کرنے کے لیے، ' setAtribute() 'طریقہ. یہ ایک HTML عنصر میں ایک وصف اور اس کی قدر کو سیٹ کرنے یا شامل کرنے کے لیے استعمال ہوتا ہے۔
نحو
مندرجہ ذیل نحو کو ' کے لیے استعمال کیا جاتا ہے setAtribute() طریقہ:
مثال
یہاں، ہم جاوا اسکرپٹ میں بٹنوں پر مختلف اسٹائل سیٹ کریں گے۔ setAtribute() 'طریقہ. تمام بٹنوں کے سرحدی رداس کو ' پر سیٹ کریں .5ریم '، اور ' کا متن کا رنگ متفق 'اور' رد کرنا 'بٹن' سفید '
مسترد setAtribute ( 'انداز' , 'پس منظر کا رنگ: سرخ؛ رنگ: سفید؛ سرحدی رداس: .5rem؛' ) ;
قبول کریں setAtribute ( 'انداز' , 'پس منظر کا رنگ: پیلا؛ سرحدی رداس: .5rem؛' ) ;
آؤٹ پٹ
طریقہ 3: 'createElement()' طریقہ استعمال کرتے ہوئے JavaScript کے ساتھ CSS شامل کریں
اگر آپ CSS اسٹائلنگ کی طرح جاوا اسکرپٹ اسٹائل میں کلاسز یا آئی ڈی بنانا چاہتے ہیں تو ' تخلیق عنصر() 'طریقہ. اسے متحرک طور پر ایک نیا عنصر بنانے کے لیے استعمال کیا جاتا ہے۔ اسٹائل کے لیے ' انداز اس طریقہ کا استعمال کرتے ہوئے عنصر۔ ' تخلیق عنصر ('اسٹائل') ” جاوا اسکرپٹ میں طریقہ کو متحرک طور پر ایک نیا اسٹائل عنصر بنانے کے لیے استعمال کیا جاتا ہے، جسے ویب پیج پر CSS اسٹائلز شامل کرنے کے لیے استعمال کیا جا سکتا ہے۔
نحو
دیئے گئے نحو کو ' کے لیے استعمال کیا جاتا ہے تخلیق عنصر() طریقہ:
جاوا اسکرپٹ میں سی ایس ایس سٹائل کو شامل کرنے کے لیے، دیا گیا نحو استعمال کریں:
const انداز = دستاویز تخلیق عنصر ( 'انداز' ) ;پھر نیچے دیے گئے نحو کا استعمال کرتے ہوئے ہیڈ ٹیگ میں اسٹائل عنصر شامل کریں:
دستاویز سر . بچے کو شامل کریں۔ ( انداز ) ;یہاں، ' انداز 'نئے تخلیق شدہ طرز عنصر کا حوالہ ہے، اور' دستاویز سر ” HTML دستاویز کا مرکزی عنصر ہے۔
مثال
سب سے پہلے، 'کا استعمال کرتے ہوئے ایک سٹائل عنصر بنائیں تخلیق عنصر() طریقہ:
اب، ایک بنائیں ' بی ٹی این 'تمام بٹنوں اور آئی ڈیز پر ایک ہی اسٹائل لگانے کے لیے کلاس' btn1 '،' btn2 'اور' btn3 انفرادی بٹن اسٹائل کے لیے:
انداز اندرونی ایچ ٹی ایم ایل = `. بی ٹی این {
فونٹ - سائز : 1.1ریم ;
بھرتی : 3px ;
مارجن : 2px ;
فونٹ - خاندان : بغیر - سیرف ;
سرحد - رداس : .5ریم ;
}
#btn1 {
پس منظر - رنگ : سبز ;
رنگ : سفید ;
}
#btn2 {
پس منظر - رنگ : سرخ ;
رنگ : سفید ;
}
#btn3 {
پس منظر - رنگ : پیلا ;
}
` ;
اب، پیرامیٹر کے طور پر پاس کرکے دستاویز کے سر پر اسٹائل عنصر کو شامل کریں۔ appendChild() طریقہ:
دستاویز سر . بچے کو شامل کریں۔ ( انداز ) ; آؤٹ پٹ
یہ سب جاوا اسکرپٹ میں سی ایس ایس شامل کرنے کے بارے میں ہے۔
نتیجہ
جاوا اسکرپٹ کے ساتھ سی ایس ایس کو شامل کرنے کے لیے، ان لائن اسٹائل کا استعمال کریں بشمول ' انداز 'جائیداد، اور' setAtribute() ' طریقہ، یا عالمی اسٹائل کا استعمال کرتے ہوئے ' تخلیق عنصر() 'طریقہ. عالمی اسٹائلنگ زیادہ کارآمد ہے جبکہ ان لائن طریقہ کی سفارش نہیں کی جاتی ہے کیونکہ اس سے درخواست کے انداز کو برقرار رکھنا مشکل ہوجاتا ہے اور یہ کوڈ کی تکرار کا باعث بن سکتا ہے۔ اس مضمون میں JavaScript کے ساتھ CSS شامل کرنے کے طریقے بیان کیے گئے ہیں۔