ফাংশন getComputedStyle

ফাংশন getComputedStyle একটি এলিমেন্টের যেকোনো CSS বৈশিষ্ট্যের মান পাওয়ার অনুমতি দেয়, এমনকি CSS ফাইল থেকেও।

সিনট্যাক্স

javascriptlet অবজেক্ট = getComputedStyle(এলিমেন্ট);

বিস্তারিত

এটি কিভাবে কাজ করে (মনোযোগ: আমরা যেমন আশা করি তেমন নয়): প্যারামিটার হিসেবে ফাংশনটি একটি এলিমেন্ট নেয়, এবং একটি অবজেক্ট রিটার্ন করে, যাতে প্রেরিত এলিমেন্টের সমস্ত CSS বৈশিষ্ট্য রয়েছে। আসুন এই অবজেক্টটি একটি ভেরিয়েবলে রাখি style। নামটি নির্বিচারে, এটি শুধুমাত্র একটি ভেরিয়েবল - আমরা যেমন ভাবব, তেমনই অ্যাক্সেস করব:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style-এ CSS বৈশিষ্ট্য রয়েছে

আসুন উদাহরণস্বরূপ, প্রস্থটি আউটপুট করি। এটি করা হয় এভাবে - style.width:

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

let style = getComputedStyle(elem);
console.log(style.width);

উদাহরণস্বরূপ, বাম padding আউটপুট করতে - এটি这样做 - style.paddingLeft:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

নিম্নলিখিত উদাহরণে, আমরা আমাদের এলিমেন্টের জন্য আমাদের আগ্রহের সমস্ত CSS বৈশিষ্ট্য আউটপুট করব:

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

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' আউটপুট করবে
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' আউটপুট করবে
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' আউটপুট করবে

getComputedStyle-এর অস্পষ্টতা

কখনও কখনও ফাংশন getComputedStyle প্রস্থ এবং উচ্চতার সাথে সম্পূর্ণরূপে সঠিকভাবে কাজ করে না। এটি এই কারণে যে padding এবং বর্ডার ব্লকটিকে প্রসারিত করে। নিম্নলিখিত উদাহরণে, ব্লকটির প্রস্থ 200px সেট করা হয়েছে, পাশাপাশি বর্ডার এবং border। ব্লকটির প্রকৃত প্রস্থ 300px, কিন্তু getComputedStyle যাইহোক আউটপুট করবে 200px:

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

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' আউটপুট করবে
console.log('height: ' + style.height); // '200px' আউটপুট করবে

অর্থাৎ: দেখা যাচ্ছে যে getComputedStyle ব্লক সম্প্রসারণ উপেক্ষা করে এবং এর আকার দেখায় যেন এই সম্প্রসারণ ছিল না। কিন্তু এটাই সব নয়: স্ক্রলবারের উপস্থিতি বা অনুপস্থিতিও গুরুত্বপূর্ণ - কিছু ব্রাউজার getComputedStyle এর মাধ্যমে গণনা করা প্রস্থ থেকে স্ক্রলবারের প্রস্থ বিয়োগ করে, আর কিছু বিয়োগ করে না। সামগ্রিকভাবে, এখানে সাধারণভাবে সমস্ত কিছুই ক্রস-ব্রাউজার নয় এবং getComputedStyle প্রস্থ এবং উচ্চতা নির্ধারণের জন্য ব্যবহার না করা ভাল, এবং মেট্রিক্স ব্যবহার করা ভাল, যা আমরা নীচে অধ্যয়ন করব।

গণনাকৃত মান

আরও একটি সূক্ষ্মতা আছে: যদি প্রস্থ %-এ সেট করা থাকে - তাহলে getComputedStyle কাজ করার পরে আমরা এটিকে px-এ দেখব। অর্থাৎ মূলত আমরা সেট করা প্রস্থ পাই না, বরং গণনাকৃত প্রস্থ পাই। নিম্নলিখিত উদাহরণটি দেখুন:

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

css#elem {
  width: 30%; /* প্রস্থ %-এ সেট */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // px-এ প্রস্থ আউটপুট করবে

আরও দেখুন