css ක්‍රමය

css ක්‍රමය මඟින් අංගයක CSS විලාසිකා ලබා ගැනීම සහ වෙනස් කිරීම කළ හැක. සැලකිල්ලට ගත යුත්තේ, අප ලබා ගන්නේ 'ගණනය කළ අගයන්' (computed style properties) වන අතර ඒවා CSS විලාසිකාවල ඇතුළත් කර ඇති අගයන්ගෙන් වෙනස් විය හැකි බවයි.

වාක්‍ය රචනය

ගුණාංගයක් ලබා ගැනීම:

javascript$(තේරීම).css(ගුණාංගය);

ගුණාංග කිහිපයක් ලබා ගැනීම, යොමු කරන පරාමිතිය ගුණාංග නම්වල අරාවකි:

javascript$(තේරීම).css(['width', 'height', 'color']);

ගුණාංගයක් වෙනස් කිරීම:

javascript$(තේරීම).css(ගුණාංගය, නව අගය);

ගුණාංග කිහිපයක් වෙනස් කරමු, ඒවා 'යතුර: අගය' යුගල අඩංගු වස්තුවක් ලෙස යොමු කරමු. ගුණාංගයේ නම CamelCase ආකාරයෙන් දක්වනු ලැබේ:

javascript$(තේරීම).css({fontSize: '12px', color: 'red'});

හෝ, විකල්ප පරිදි:

html<p class="www">text</p>

javascript$('.www').css({'font-size':'12px', 'color':'red'});

අපට සැකසුමේ ඇති සෑම අංගයකටම නිශ්චිත ශ්‍රිතයක් යොදා ගත හැකිය. මෙහිදී, ශ්‍රිතයට පළමු පරාමිතිය ලෙස සැකසුමේ ඇති අංගයේ අංකය සහ දෙවන පරාමිතිය ලෙස එම නිශ්චිත අංගය සඳහා ඇති CSS ගුණාංගයේ වත්මන් අගය ලැබේ. මෙහිදී this ශ්‍රිතය තුළ වත්මන් අංගය යොමු කරයි. සෑම අංගයකම CSS ගුණාංගය වෙනස් වන්නේ, ශ්‍රිතය එම අංගය සඳහා නිශ්චිතව ආපසු ලබා දෙන අගයටයි:

javascript$(තේරීම).css(ගුණාංග නම, function(සැකසුමේ අංකය, CSS ගුණාංගයේ වත්මන් අගය));

උදාහරණය

අපි www වර්ගය සමඟ ඇති සියලුම අංග ලබා ගෙන ඒවායේ වර්ණය රතු පැහැයට වෙනස් කරමු:

html<p class="www">text</p>

javascript$('.www').css('color', 'red');

උදාහරණය

අපි www වර්ගය සමඟ ඇති සියලුම අංග ලබා ගෙන ඒවායේ වර්ණය රතු පැහැයට සහ අකුරු ප්‍රමාණය 20px ට වෙනස් කරමු:

html<p class="www">text</p>

javascript$('.www').css({color:'red', fontSize:'20px'});

හෝ, විකල්ප පරිදි:

html<p class="www">text</p>

javascript$('.www').css({'color':'red', 'font-size':'20px'});

මෙයද බලන්න