classList ක්‍රමය

classList ක්‍රමයෙහි මූලද්‍රව්‍යයේ CSS පන්ති වල සුළු අරාව අඩංගු වන අතර, මූලද්‍රව්‍යයේ පන්ති එකතු කිරීම, ඉවත් කිරීම සහ මූලද්‍රව්‍යයේ පන්ති අතර නිශ්චිත පන්තියක් තිබීම පරීක්ෂා කිරීමටද ඉඩ සලසයි.

මෙහි කතා කරන්නේ class ගුණාංගය ගැන ය, එහි අභ්‍යන්තරයේ අවකාශයකින් වෙන් කරමින් පන්ති කිහිපයක් ලිවිය හැකිය, උදාහරණයක් ලෙස www ggg zzz. classList භාවිතයෙන්, උදාහරණයක් ලෙස, ggg පන්තිය අනෙක් පන්තිවලට හානි නොකරමින් ඉවත් කළ හැකිය.

වාක්‍ය රීතිය

javascriptමූලද්‍රව්‍යය.classList;

උදාහරණය . පන්ති ගණන

මූලද්‍රව්‍යයේ පන්ති ගණන සොයා ගනිමු:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

javascript3

උදාහරණය . පන්ති හරහා ගමන් කිරීම

මූලද්‍රව්‍යයේ පන්ති එකින් එක අවුට්පුට් කරමු:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
  console.log(className);
}

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

javascript'www'
'ggg'
'zzz'

මෙයද බලන්න

  • classList.add ක්‍රමය,
    එය නිශ්චිත පන්තියක් එකතු කරයි
  • classList.remove ක්‍රමය,
    එය නිශ්චිත පන්තියක් ඉවත් කරයි
  • classList.contains ක්‍රමය,
    එය නිශ්චිත පන්තියක් පරීක්ෂා කරයි
  • classList.toggle ක්‍රමය,
    එය නිශ්චිත පන්තියක් විකල්ප කරයි