CSS ফাইল থেকে জাভাস্ক্রিপ্টে বৈশিষ্ট্য পড়া

CSS ফাইলে নির্ধারিত বৈশিষ্ট্যগুলি একটি বিশেষ ফাংশন getComputedStyles ব্যবহার করে পড়া যেতে পারে।

আসুন দেখি কিভাবে এটি করা হয়। ধরুন আমাদের নিম্নলিখিত উপাদান আছে:

<div id="elem">
	text
</div>

ধরুন এই উপাদানের জন্য নিম্নলিখিত স্টাইলগুলি নির্ধারিত হয়েছে:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

একটি ভেরিয়েবলে উপাদানটির রেফারেন্স পাই:

let elem = document.querySelector('#elem');

এখন প্রাপ্ত উপাদানটির রেফারেন্স getComputedStyles ফাংশনের প্যারামিটার হিসেবে পাস করি:

let computedStyle = getComputedStyle(elem);

ফলস্বরূপ, আমরা একটি অবজেক্ট পাব, যাতে আমাদের উপাদানের CSS বৈশিষ্ট্যের মানগুলি রয়েছে। আসুন এটি ব্যবহার করে পড়ি, উদাহরণস্বরূপ, রং:

console.log(computedStyle.color); // আউটপুট দেবে 'red'

এবং এখন প্রস্থ:

console.log(computedStyle.width); // আউটপুট দেবে '100px'

এবং এখন ফন্টের আকার:

console.log(computedStyle.fontSize); // আউটপুট দেবে '20px'

উপাদানটির জন্য নিম্নলিখিত স্টাইলগুলি নির্ধারিত হয়েছে:

#elem {
	width: 200px;
	height: 200px;
}

বাটনে ক্লিক করে উপাদানটির প্রস্থ এবং উচ্চতা আউটপুট দিন।

উপাদানটির জন্য নিম্নলিখিত স্টাইলগুলি নির্ধারিত হয়েছে:

#elem {
	width: 200px;
	height: 200px;
}

বাটনে ক্লিক করে উপাদানটির প্রস্থ এবং উচ্চতা দুই গুণ বাড়ান।