কম্পিউটার টিউটোরিয়াল

ভ্যানিলা JavaScript দিয়ে DOM এলিমেন্ট হাইড এবং শো করার পদ্ধতি

প্লেইন, ভ্যানিলা JavaScript দিয়ে DOM এলিমেন্ট হাইড এবং শো করার পদ্ধতি শিখুন।

JavaScript-এ একটি স্টাইল প্রোপার্টি আছে, উপযুক্ত নাম style, যা এলিমেন্টে CSS প্রোপার্টি সেট করতে এবং সেগুলো স্টাইল করতে ব্যবহার করা যায়, ঠিক যেমন আপনি CSS-এ করতে পারেন। আসুন ট্রাই করি!

DOM এলিমেন্ট হাইড করার পদ্ধতি JavaScript-এ:

element.style.display = "none"

DOM এলিমেন্ট আবার ডিসপ্লে করতে:

element.style.display = "block"

নোট: যদি আপনার DOM এলিমেন্ট 본래 inline বা inline-block সেট করা থাকে, তবে উপরের block ভ্যালুটিকে সেসব ভ্যালুর একট দিয়ে রিপ্লেস করুন।

প্র্যাক্টিক্যাল উদাহরণ

উপরের উদাহরণে, element শুধু একটি জেনেরিক প্লেসহোল্ডার। JavaScript-এর style প্রোপার্টি প্র্যাক্টিক্যালি ব্যবহার করতে, আপনাকে প্রথমে সেই DOM এলিমেন্টটি সিলেক্ট করতে হবে যেটি আপনি স্টাইল করতে চান।

মান লইয়া আপনার একটি বাটন আছে যেটি আপনি DOM থেকে রিমুভ করতে চান, নাম cta-button। আপনি সেটি নিচের মতো করবেন:

const ctaButton = document.querySelector(".cta-button") ctaButton.style.display = "none"
  1. জাভাস্ক্রিপ্টে HTML DOM-এ নতুন এলিমেন্ট যোগ করা

  2. জাভাস্ক্রিপ্টে ডিওএম এলিমেন্টে ক্লাস যোগ করা

  3. জাভাস্ক্রিপ্ট দিয়ে এলিমেন্ট লুকানো আছে কিনা যাচাই করা

  4. CSS দিয়ে HR এলিমেন্ট স্টাইল করার পদ্ধতি