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

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

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

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

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

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

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

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

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

javascript let computedStyle = getComputedStyle(elem);

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

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

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

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

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

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

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

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