জাভাস্ক্রিপ্টে এলিমেন্ট স্টাইলিং
ধরুন আমাদের কয়েকটি অনুচ্ছেদ আছে:
<p>text1</p>
<p>text2</p>
<p>text3</p>
চলুন একটি লুপ ব্যবহার করে এই অনুচ্ছেদগুলি অতিক্রম করি এবং প্রতিটি অনুচ্ছেদের শেষে একটি লিঙ্ক যোগ করি, যাতে ক্লিক করলে অনুচ্ছেদের টেক্সটে কিছু স্টাইল প্রয়োগ হবে। উদাহরণস্বরূপ, অনুচ্ছেদের টেক্সটটি অতিক্রান্ত হয়ে যাবে (এটি করে CSS বৈশিষ্ট্য text-decoration)।
চলুন এমন একটি কাজের দুটি সূক্ষ্ম বিষয় নিয়ে আলোচনা করি।
প্রথমত, যেমনটি আগের পাঠগুলিতে আলোচনা করা হয়েছে, সরাসরি জাভাস্ক্রিপ্টের মাধ্যমে অনুচ্ছেদের স্টাইল পরিবর্তন করা উচিত নয় - কিছু CSS ক্লাস প্রয়োগ করাই অনেক বেশি সুবিধাজনক হবে।
দ্বিতীয়ত, এমন একটি কাজ বাস্তবায়ন করার সময় আপনি একটি কিছুটা অপ্রত্যাশিত বিষয়ের সম্মুখীন হবেন। এর সারমর্ম বোঝার জন্য, চলুন লিঙ্ক যোগ করার পরে অনুচ্ছেদগুলির HTML কোড দেখি:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
এখন কল্পনা করুন যে লিঙ্কে ক্লিক করলে অনুচ্ছেদের টেক্সট অতিক্রান্ত হবে। যাইহোক, এই ক্ষেত্রে লিঙ্কটিও অনুচ্ছেদের অংশ এবং সেটিও অতিক্রান্ত হবে! সম্ভবত এমন প্রভাব আমরা চাই না। আমরা চাই যে টেক্সটটি অতিক্রান্ত হোক, কিন্তু লিঙ্কটি না হোক।
সমস্যার সমাধানের জন্য শুধু অনুচ্ছেদের টেক্সটটিকে একটি span ট্যাগের মধ্যে আবদ্ধ করতে হবে, এভাবে:
<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
নিম্নলিখিত HTML কোড দেওয়া আছে:
<p>text1</p>
<p>text2</p>
<p>text3</p>
প্রতিটি অনুচ্ছেদের শেষে একটি লিঙ্ক যোগ করুন, যাতে ক্লিক করলে অনুচ্ছেদের টেক্সট অতিক্রান্ত হয়ে যায় (কিন্তু লিঙ্কটি না হয়)।
পূর্ববর্তী কাজটি পরিবর্তন করুন যাতে লিঙ্কে ক্লিক করার পরে সেই লিঙ্কটি অনুচ্ছেদ থেকে মুছে যায় (এবং অনুচ্ছেদের টেক্সট অতিক্রান্ত হয়ে যায়)।
কিছু HTML টেবিল দেওয়া আছে। এই টেবিলে আরও একটি কলাম যোগ করুন যাতে একটি লিঙ্ক থাকে। এই লিঙ্কে ক্লিক করলে সেই সারিটি সবুজ ব্যাকগ্রাউন্ড হয়ে যাবে।
পূর্ববর্তী কাজটি পরিবর্তন করুন যাতে লিঙ্কে প্রথম ক্লিকে সারিটি সবুজ ব্যাকগ্রাউন্ড করে এবং দ্বিতীয় ক্লিকে এই কাজটি বাতিল করে।
