আস্সালামু আলাইকুম! আশা করি আল্লাহর রহমতে আপনি ভালো আছেন। 🥰 আলহামদুলিল্লাহ আমিও ভালো আছি। আজকের Topic এ আপনাকে স্বাগত! উইকিজানা ব্লগে প্রযুক্তিগত আপডেট থাকতে গুগল নিউজে ★ Followকরুন।
জাভাস্ক্রিপ্ট HTML কন্টেন্ট পরিবর্তন করতে পারে
আপনার এইচটিএমএল ফাইলে ব্যবহৃত যেকোনো লেখা কন্টেন্ট পরিবর্তন করতে সক্ষম এই
জাভাস্ক্রিপ্ট।
নিচের HTML কন্টেন্ট এর ভিতর Hello, World লেখা আছে তা আমরা জাভাস্ক্রিপ্ট ব্যবহার করে চেন্জ করবো।
<p id="my-paragraph">Hello, World!</p>
var element = document.getElementById("my-paragraph"); // Get the element with the ID "my-paragraph"
element.innerHTML = "Goodbye, World!"; // Change the text content of the element
জাভাস্ক্রিপ্ট HTML এর এট্রিবিউট পরিবর্তন করতে পারে
কোনো HTML এট্রিবিউট যদি পরিবর্তন করার প্রয়োজন হয়। তবে জাভাস্ক্রিপ্ট ব্যবহার
করে তাও করা সম্ভব হবে।
নিচের কোড গুলো খেয়াল করুন, এখানে src এট্রিবিউট এর মধ্যে example.jpg নামের ফটো
লোকেশন আছে। এইটা আমরা চেন্জ করতে পারবো। এবং alt এট্রিবিউট এর মধ্যে Example
image লেখা আছে তাও আমরা চেন্জ করতে পারবো।
<img id="my-image" src="example.jpg" alt="Example image">
নিচের জাভাস্ক্রিপ্ট গুলো ব্যবহার করে src ও alt এট্রিবিউট চেন্জ করা হয়েছে।
var element = document.getElementById("my-image"); // Get the element with the ID "my-image"
element.setAttribute("src", "new-image.jpg"); // Change the "src" attribute value to "new-image.jpg"
element.setAttribute("alt", "New image"); // Change the "alt" attribute value to "New image"
জাভাস্ক্রিপ্ট ব্যবহার করে সিএসএস চেন্জ করা যায়
যদি কখনো প্রয়োজন হয় জাভাস্ক্রিপ্ট এর মাধ্যমে স্টাইল চেন্জ করার তখন আমরা নিচের
মতো জাভাস্ক্রিপ্ট করবো।
নিচের কোডের মধ্যে কিছু CSS দেখা যাচ্ছে। এই গুলো আমরা চেন্জ করবো।
<div id="my-div" style="background-color: blue; width: 100px; height: 100px;"></div>
উপরের সিএসএস গুলো ডিফল্ট ভাবে থাকা সত্বেও যদি কোনো ফাংশনাল কাজে কোনো স্টাইল
চেন্জ করার প্রয়োজন হয় তবে আমরা নিচের জাভাস্ক্রিপ্ট লিখবো। নিচের জাভাস্ক্রিপ্ট
এর মাধ্যমে উপরের এইচটিএমএলে ব্যবহার করা প্রতিটি সিএসএস পরিবর্তন করা হয়েছে।
var element = document.getElementById("my-div"); // Get the element with the ID "my-div"
element.style.backgroundColor = "red"; // Change the background color to red
element.style.width = "200px"; // Change the width to 200px
element.style.height = "50px"; // Change the height to 50px
জাভাস্ক্রিপ্ট দিয়ে কোনো কন্টেন্ট লুকাতে ও দেখাতে পারবেন
যদিও এই কাজ আমরা সিএসএস এর সাহায্য নিয়ে করবো তবে এইটা প্রচুর ব্যবহার করা হয়
বিভিন্ন কাজে।
<div id="my-div">Hello, World!</div>
উপরের HTML কন্টেন্ট যদি লুকাতে চান তবে none ও block ব্যবহার করতে পারবেন। তবে এইটা যখন আমরা সরাসরি ব্যবহার করবো তখন সুন্দর ভাবে বুঝতে পারবেন।
var element = document.getElementById("my-div"); // Get the element with the ID "my-div"
element.style.display = "none"; // Hide the element
element.style.display = "block"; // Show the element
এই ব্লগটি যদি আপনার কাজে লেগে থাকে বা আপনার উপকারে আসে তবেই আমাদের স্বার্থকতা।
আপনাদের জানার চাহিদা মেটাতেই আমরা ব্লগিং করে থাকি।
পরিচিত কাউকে এই তথ্য জানাতে শেয়ার করুন। উইকিজানা ব্লগে
ফ্রীল্যান্সিং,
এডুকেশন ও তথ্যমূলক ব্লগ প্রচার করে থাকে। আরো বিভিন্ন জনপ্রিয় ব্লগ পড়তে নিচে স্ক্রল করুন।