මූලද්රව්ය මෝස්තර වෙනස් කිරීම පහසුය, නමුත් අගය කියවීමට ටිකක් උපක්‍රමශීලී ය.
ඔබ ජාවාස්ක්‍රිප්ට් හි getComputedStyle බිල්ට් ඉන් කෝල් භාවිතා නොකරන්නේ නම්, ජාවාස්ක්‍රිප්ට් හට CSS (අභ්‍යන්තර / බාහිර) වෙතින් එන මූලද්රව්ය ශෛලීය දේපල (elem.style) කියවිය නොහැක.
getComputedStyle (මූලද්රව්යය [, ව්‍යාජ])
මූලද්රව්යය: සඳහා අගය කියවිය යුතු අංගය.
ව්‍යාජ: අවශ්ය නම් ව්‍යාජ මූලද්‍රව්‍යයක්, උදාහරණයක් ලෙස :: පෙර. හිස් නූලක් හෝ තර්කයක් නැත යන්නෙන් අදහස් කරන්නේ මූලද්‍රව්‍යයයි.
ප්‍රති result ලය වන්නේ elem.style වැනි ශෛලීය ගුණාංග සහිත වස්තුවකි, නමුත් දැන් සියලු css පන්ති වලට සාපේක්ෂව.
උදාහරණයක් ලෙස, මෙහි ශෛලිය ආන්තිකය නොපෙනේ:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
එබැවින් ඔබේ ජාවාස්ක්‍රිප්ට් කේතය වෙනස් කර එහි පළල / උස හෝ වෙනත් ගුණාංගයක් ලබා ගැනීමට ඔබ කැමති මූලද්රව්යයේ getComputedStyle ඇතුළත් කරන්න.
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
ගණනය කළ සහ විසඳූ අගයන්
CSS හි සංකල්ප දෙකක් තිබේ:
CSS කඳුරැල්ලේ ප්‍රති result ලයක් ලෙස ගණනය කරන ලද ශෛලීය අගයක් යනු සියලු CSS රීති සහ CSS උරුමය යෙදීමෙන් පසුව ඇති අගයයි. එය උස මෙන් පෙනේ: 1em හෝ අකුරු ප්රමාණය: 125%.
නිරාකරණය කරන ලද ශෛලීය අගයක් යනු මූලද්‍රව්‍යයට අවසාන වශයෙන් යොදන අගයයි. 1em හෝ 125% වැනි අගයන් සාපේක්ෂ වේ. බ්‍රව්සරය ගණනය කළ අගය ගෙන සියලු ඒකක ස්ථාවර හා නිරපේක්ෂ කරයි, උදාහරණයක් ලෙස: උස: 20px හෝ අකුරු ප්රමාණය: 16px. ජ්‍යාමිතික ගුණාංග සඳහා නිරාකරණය කළ අගයන්ට පළල: 50.5px වැනි පාවෙන ලක්ෂ්‍යයක් තිබිය හැකිය.
බොහෝ කලකට පෙර getComputedStyle නිර්මාණය කරන ලද්දේ ගණනය කළ අගයන් ලබා ගැනීම සඳහා වන නමුත් එය විසඳා ඇති අගයන් වඩා පහසු බව පෙනී ගිය අතර ප්‍රමිතිය වෙනස් විය.
එබැවින් වර්තමානයේ getComputedStyle ඇත්ත වශයෙන්ම දේපලෙහි නිරාකරණය කළ වටිනාකම ලබා දෙයි.
කරුණාකර සටහන් කර ගන්න:
getComputedStyle සඳහා සම්පූර්ණ දේපල නම අවශ්ය වේ
පැඩින් ලෙෆ්ට් හෝ උස හෝ පළල වැනි ඔබට අවශ්ය දේපළ සැමවිටම ඉල්ලා සිටිය යුතුය. එසේ නොමැතිනම් නිවැරදි ප්‍රති result ලය සහතික නොවේ.
උදාහරණයක් ලෙස, paddingLeft / paddingTop යන ගුණාංග තිබේ නම්, getComputedStyle (elem) සඳහා අප ලබා ගත යුත්තේ කුමක්ද .පෑඩින් කිරීම? කිසිවක් නැත, නැතහොත් දන්නා පෑඩින් වලින් “ජනනය කළ” වටිනාකමක් තිබේද? මෙහි සම්මත රීතියක් නොමැත.
වෙනත් නොගැලපීම් තිබේ. උදාහරණයක් ලෙස, සමහර බ්‍රව්සර් (ක්‍රෝම්) පහත ලේඛනයේ 10px පෙන්වන අතර සමහර ඒවා (ෆයර්ෆොක්ස්) - එසේ නොකරයි:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
වැඩි විස්තර සඳහා https://javascript.info/styles-and-classes