Mar 31

jQuery দিয়ে CSS Class এর মান বের করা এবং অরোপ করা

জেকুয়্যেরি (jQuery) – গেট ও সেট সিএসএস ক্লাসেস

মো: আসাদুজ্জামান
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

 

JQuery সঙ্গে, এলিমেন্টের সিএসএস ম্যানিপুলেট সহজ।

 

jQuery ম্যানিপুলেটিং সিএসএস

jQuery এর CSS ম্যানিপুলেশন জন্য বিভিন্ন পদ্ধতি আছে। আমরা নিম্নলিখিত পদ্ধতি পর্যবেক্ষণ করবো:

  • addClass () – নির্বাচিত এলিমেন্ট এক বা একাধিক ক্লাস যুক্ত করে
  • removeClass () – নির্বাচিত এলিমেন্ট থেকে এক বা একাধিক ক্লাস মুছে ফেলে
  • toggleClass () – নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে
  • css()- সেটস্ অথবা স্টাইল এট্রিবিউট ফেরৎ করে

 

উদাহরণ স্টাইলশীট

নিম্নলিখিত স্টাইল এই পেজে সব উদাহরণ জন্য ব্যবহার করা হবে:

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

 

jQuery এর addClass () পদ্ধতি

নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে এ কিভাবে ক্লাস এট্রিবিউট যোগ করা হয় তা দেখানো হয়েছে। ক্লাস যোগ করার সময় অবশ্যই আপনি, একাধিক এলিমেন্ট নির্বাচন করতে পারেন:

উদাহরণ:

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

ফলাফল : addClass ()

 

এছাড়াও আপনি addClass () মেথড এর মধ্যে একাধিক ক্লাস নির্দিষ্ট করতে পারেন:

উদাহরণ:

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

ফলাফল : একাধিক ক্লাস

 

jQuery এর removeClass () পদ্ধতি

নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে থেকে কিভাবে ক্লাস এট্রিবিউট অপসারণ করা হয় তা দেখানো হয়েছে।

উদাহরণ:

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

ফলাফল : removeClass ()

 

jQuery এর toggleClass () পদ্ধতি

নিম্নলিখিত উদাহরণে দেখানো হয়েছে কিভাবে jQuery toggleClass () মেথড ব্যবহার করা হয়। এ পদ্ধতি নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে:

উদাহরণ:

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

ফলাফল : toggleClass ()

 

jQuery এর css() পদ্ধতি

JQuery এর css()মেথড পরবর্তী অধ্যায়ে ব্যাখ্যা করা হবে।

 

jQuery এর CSS রেফারেন্স

সমস্ত jQuery সিএসএস পদ্ধতির জন্য, আমাদের jQuery এর HTML / CSS এর রেফারেন্স এ যান।