CSS ගොනු වලින් ගුණාංග කියවීම JavaScript හි

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;
}