কিভাবে জাভাস্ক্রিপ্ট দিয়ে এইচটিএমএল অ্যাট্রিবিউটের মান পরিবর্তন করবেন

জাভাস্ক্রিপ্টের সাহায্যে HTML এলিমেন্ট অ্যাট্রিবিউটের মান কীভাবে পরিবর্তন করতে হয় তা জানুন।

ধরা যাক href-এ একটি ত্রুটিপূর্ণ URL লিঙ্ক পাথ সহ একটি ওয়েবসাইটে আপনার একটি অ্যাঙ্কর উপাদান রয়েছে বৈশিষ্ট্য মান।

আপনার মেনু/নেভিগেশন বারে এটি দেখতে একটি সাধারণ জায়গা:

<nav>
    <ul>
        <li>
            <a href="/path-to-your-page" id="some-id">Link</a>
        </li>
    </ul>
</nav>

অভ্যন্তরীণ ওয়েব পৃষ্ঠার লিঙ্কগুলির আরেকটি সাধারণ জায়গা হল আপনার ওয়েবসাইটের নীচে আপনার ফুটারে।

ধরা যাক কেউ ভুল করেছে। আপনার href মান হল /contact-me কিন্তু এটি /contact-us হওয়ার কথা , এবং যে কারণেই হোক, আপনি সরাসরি HTML কোডে এটি সমাধান করতে পারবেন না (সম্ভবত ব্যাকএন্ডে আপনার লেখার অ্যাক্সেস নেই)।

আপনাকে যত তাড়াতাড়ি সম্ভব এটি ঠিক করতে হবে যাতে আপনার দর্শকরা এটিতে ক্লিক করলে একটি ফাঁকা পৃষ্ঠা দেখতে না পায়।

আপনার যদি ফ্রন্টএন্ড কোডে অ্যাক্সেস থাকে, যেমন একটি CMS (কন্টেন্ট ম্যানেজমেন্ট সিস্টেম) এর মাধ্যমে আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন আপনার অ্যাঙ্কর এলিমেন্টে বিদ্যমান href মানটিকে ওভাররাইড করতে, ব্যাকএন্ডকে একেবারে স্পর্শ না করেই৷

আমি আপনাকে এটি করার দুটি ভিন্ন উপায় দেখাব।

আইডির উপর ভিত্তি করে উপাদান নির্বাচন করুন

ধরা যাক প্রতিটি নেভি লিঙ্কে একটি অনন্য আইডি সহ আপনার এইচটিএমএল মার্কআপটি এরকম দেখাচ্ছে:

<nav>
	<ul>
		<li>
			<a href="/" id="home">Home</a>
		</li>
		<li>
			<a href="/services" id="services">Services</a>
		</li>
		<li>
			<a href="/contact-me" id="contact">Contact</a>
		</li>
	</ul>
</nav>

এখন আমরা Contact লিঙ্কে href মান পরিবর্তন করতে চাই।

প্রথমে, এটির আইডির উপর ভিত্তি করে আপনার অ্যাঙ্কর/লিঙ্ক উপাদান নির্বাচন করুন:

const contactLink = document.querySelector('#contact')

তারপর href নির্বাচন করতে ডট নোটেশন ব্যবহার করুন আপনার অ্যাঙ্কর উপাদানের বৈশিষ্ট্য এবং এটিকে /contact-us এর একটি নতুন মান দিন :

contactLink.href === '/contact-us'

এটাই!

এখন আপনি যদি এটিকে আপনার কনসোলে লগ করেন, আপনি দেখতে পাবেন যে আগের ত্রুটিপূর্ণ href বৈশিষ্ট্যের মানটি নতুন সঠিক URL পাথ দিয়ে প্রতিস্থাপিত হয়েছে:

console.log(contactLink.href)
// output: "https://your-domain.com/contact-us"

সমস্ত JS কোড:

// Select anchor/link element based on its ID
const contactLink = document.querySelector('#contact')

// Change href value
contactLink.href === '/contact-us'

// Print result
console.log(contactLink.href)

একটি নির্দিষ্ট স্ট্রিং মানের উপর ভিত্তি করে উপাদান নির্বাচন করুন

আপনি এমন পরিস্থিতিতে থাকতে পারেন যেখানে আপনার HTML লিঙ্ক উপাদানটির একটি অনন্য আইডি বা ক্লাস নেই। আপনার HTML মার্কআপ দেখতে এরকম হতে পারে

<nav>
	<ul>
		<li>
		    <a href="/">Home</a>
		</li>
		<li>
		    <a href="/services">Services</a>
		</li>
		<li>
		    <a href="/contact-me">Contact</a>
		</li>
	</ul>
</nav>

সমস্যা নেই. আপনি querySelector() এর সাথে একটি CSS3 নির্বাচক ব্যবহার করতে পারেন এই ক্ষেত্রে /contact-me আপনি একটি সঠিক স্ট্রিং মান নির্বাচন করতে চান তা নির্দিষ্ট করতে .

এটি কীভাবে করবেন তা এখানে:

const contactLink = document.querySelector('a[href*="/contact-me"]')

এখন আপনার ভেরিয়েবল থেকে href মানটি প্রিন্ট করুন দেখতে আপনি যে href মানটি খুঁজছিলেন তা আপনি সত্যিই খুঁজে পেয়েছেন কিনা:

console.log(contactLink.href)
// output: "https://your-domain.com/contact-me" 

ইহা কর!

এখন আপনি href পরিবর্তন করতে পারেন আগের উদাহরণের মতো সঠিক URL পাথের মান:

contactLink.href === '/contact-us'

সমস্ত কোড:

// Select link with specific href string value
const contactLink = document.querySelector('a[href*="/contact-me"]')

// Change href string value
contactLink.href = '/contact-us'

// Print result
console.log(contactLink.href)