CSS ගොනු වලින් ගුණාංග කියවීම JavaScript හි
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;
}
බොත්තම ක්ලික් කිරීම මත මූලද්රව්යයේ පළල සහ උස දෙගුණයක් කරන්න.
