getComputedStyle ශ්‍රිතය

getComputedStyle ශ්‍රිතය ඔබට මූලද්‍රව්‍යයේ ඕනෑම CSS ගුණාංගයක අගයක් ලබා ගැනීමට, CSS ගොනුවෙන් පවා ඉඩ සලසයි.

වාක්‍ය රචනා ආකෘතිය

let වස්තුව = getComputedStyle(මූලද්‍රව්‍යය);

විස්තර

එය ක්‍රියා කරන ආකාරය (අවධානය: අප අපේක්ෂා කරන ආකාරයට නොවේ): පරාමිතියක් ලෙස ශ්‍රිතය මූලද්‍රව්‍යයක් පිළිගනී, පසුව එය ලබා දුන් මූලද්‍රව්‍යයේ ඇති සියලුම CSS ගුණාංග අඩංගු වස්තුවක් ආපසු ලබා දෙයි. අපි මෙම වස්තුව style විචල්‍යයට තබමු. නම අත්තනෝමතිකයි, මෙය ඇත්තේ සරල විචල්‍යයක් පමණි - අපි සිතන ආකාරයට, එම ආකාරයට අපි එයට ප්‍රවේශ වේවි:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style හි CSS ගුණාංග අඩංගු වේ

අපි උදාහරණයක් ලෙස, පළල ප්‍රතිදානය කරමු. මෙය කරනු ලබන්නේ මෙසේය - style.width:

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

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

උදාහරණයක් ලෙස, වම් padding ප්‍රතිදානය කිරීමට - මෙය කරන්න - style.paddingLeft:

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

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

ඊළඟ උදාහරණයේ දී, අපි අපගේ මූලද්‍රව්‍යය සඳහා අප උනන්දුවක් දක්වන සියලුම CSS ගුණාංග ප්‍රතිදානය කරමු:

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

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

let 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 ප්‍රතිදානය කරයි:

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

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

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' ප්‍රතිදානය කරයි
console.log('height: ' + style.height); // '200px' ප්‍රතිදානය කරයි

එනම්: පෙනෙන පරිදි, getComputedStyle කොටුවේ පුළුල් වීම නොසලකා හරින අතර එහි මාන පෙන්වන්නේ මෙම පුළුල් වීමක් නොතිබූ ආකාරයටය. නමුත් මෙය තවම හැම දෙයක්ම නොවේ: එසේම සුරේඛුව ස්ක්‍රෝල් තීරුවක් තිබීම හෝ නොතිබීමද ගැටලුවකි - සමහර බ්‍රවුසර සුරේඛුව ස්ක්‍රෝල් තීරුවේ පළල getComputedStyle හරහා ගණනය කරන ලද පළලෙන් අඩු කරයි, සමහර ඒවා අඩු නොකරයි. සාමාන්‍යයෙන් මෙහිදී හරියටම cross-browser නොවන අතර හොඳටම getComputedStyle පළල සහ උස තීරණය කිරීම සඳහා භාවිතා නොකිරීම, සහ අපි ටිකක් පහළින් අධ්‍යයනය කරන මෙට්‍රික් භාවිතා කිරීම වඩා හොඳය.

ගණනය කළ අගයන්

තවත් සූක්ෂ්මතාවයක් තිබේ: පළල % වලින් නියම කර ඇත්නම් - getComputedStyle ක්‍රියා කිරීමෙන් පසු අපට පෙනෙනු ඇත එය px වලින්. එනම් සාරාංශයක් ලෙස අපට ලැබෙන්නේ නියම කරන ලද පළල නොව, ගණනය කරන ලද පළලයි. පහත උදාහරණය බලන්න:

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

#elem {
	width: 30%; /* පළල % වලින් නියම කර ඇත */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // px වලින් පළල ප්‍රතිදානය කරයි

මෙයද බලන්න

cssText ගුණාංගය,
ප්‍රමාණවත් CSS විලාසිතා ලබා දෙයි