jQuery کا CSS کلاس حاصل اور تنظیم کرنا

jQuery کے ذریعے، CSS عناصر پر آسانی سے عمل کیا جاسکتا ہے۔

jQuery CSS عمل

jQuery کا CSS عمل کرنے والا کئی طریقوں کا حامل ہے۔ ہم درج ذیل طریقوں کو سیکھیں گے:

  • addClass() - منتخب شدہ عناصر پر کلاسوں کو اضافہ کرنا
  • removeClass() - منتخب شدہ عناصر سے کلاسوں کو حذف کرنا
  • toggleClass() - منتخب شدہ عناصر پر کلاسوں کو اضافہ یا حذف کا عمل
  • css() - استایل نمائش یا واپسی کا عمل

مثال استایل شیئٹ

درج کئے گئے اس استایل شیئٹ کو اس صفح کے تمام مثالوں میں استعمال کیا جائے گا:

.ایمپورٹینٹ
{
فونٹ وزن:بولڈ;
فونٹ سائز:xx-بڑا;
}
.بلو
{
رنگ:بلو;
}

jQuery addClass() طریقہ

ایک مثال پیش کیا جائے گا کہ کیسے مختلف عناصر میں کلاس کی اپنی خاصیت کو اضافہ کیا جاتا ہے۔ البتہ کلاسوں کو اضافہ کرتے وقت آپ بہت سے عناصر کو بھی منتخب کرسکتے ہیں:

مثال

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

آپ خود کا تجربہ کریں

آپ بھی addClass() طریقے میں کئی کلاسوں کو طے سکتے ہیں:

مثال

$("button").click(function(){
  $("#div1").addClass("important blue");
});

آپ خود کا تجربہ کریں

jQuery removeClass() طریقہ

ایک مثال پیش کیا جائے گا کہ کیسے مختلف عناصر میں مخصوص کلاس کی اپنی خاصیت کو حذف کیا جاتا ہے:

مثال

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

آپ خود کا تجربہ کریں

jQuery toggleClass() طریقہ

ایک مثال پیش کیا جائے گا کہ کیسے jQuery toggleClass() طریقہ استعمال کیا جاتا ہے۔ اس طریقے نے منتخب شدہ عناصر پر کلاسوں کو اضافہ یا حذف کرنے کا کام کرتا ہے:

مثال

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

آپ خود کا تجربہ کریں

jQuery css() طریقہ

آئندہ فصل میں ہم jQuery css() طریقہ بات کریں گے。

jQuery HTML عملیانہ دستورزن

جس کاjQuery CSS طریقوں کا پورا مطلب چاہئیں تو ہمارے jQuery CSS عملیانہ دستورزن