toggleClass ක්‍රමය

toggleClass ක්‍රමය CSS පංතියක් එකතු කිරීම/ඉවත් කිරීම ප්‍රත්‍යාවර්තනය කරයි: එය නොමැති නම් එකතු කරනු ඇත, ඇත්නම් ඉවත් කරනු ඇත.

වාක්‍ය රීතිය

එක් CSS පංතියක්:

javascript$(සෙලෙක්ටරය).toggleClass(පංතියේ නම);

දෙවන පරාමිතිය අනුව CSS පංතිය එකතු කිරීම හෝ ඉවත් කිරීම පමණක්, එය true හෝ false අගයන් භාවිතා කරයි:

javascript$(සෙලෙක්ටරය).toggleClass(CSS පංතියේ නම, තත්වය);

CSS පංති කිහිපයක්:

javascript$(සෙලෙක්ටරය).toggleClass(['පංතිය1', 'පංතිය2', 'පංතිය3', '...']);

දෙවන පරාමිතිය අනුව CSS පංති එකතු කිරීම හෝ ඉවත් කිරීම පමණක්:

javascript$(සෙලෙක්ටරය).toggleClass(['පංතිය1', 'පංතිය2', 'පංතිය3', '...'], තත්වය');

කට්ටලයේ එක් එක් මූලද්‍රව්‍යයට ශ්‍රිතය යෙදීම, තත්වය true හෝ false විය හැක, එය ක්‍රමයට දක්වන්නේ - CSS පංතිය එකතු කිරීම හෝ ඉවත් කිරීම පමණක් බව:

javascript$(සෙලෙක්ටරය).toggleClass(function(කට්ටලයේ අංකය, මූලද්‍රව්‍යයේ වර්තමාන පංති, තත්වය), [තත්වය]);

උදාහරණය

අපගේ ඡේදයට දැනටමත් පංති දෙකක් ඇත. අපි එයට www පංතිය ද එකතු කරමු:

html<p id="test" class="eee ggg">පෙළ</p>
javascript$('#test').toggleClass('www');

HTML කේතය මෙලෙස පෙනෙනු ඇත:

html<p id="test" class="eee ggg www">පෙළ</p>

උදාහරණය

දැන් www පංතිය මූලද්‍රව්‍යයේ දැනටමත් ඇත - අපි එය ඉවත් කරමු:

html<p id="test" class="eee ggg www">පෙළ</p>
javascript$('#test').toggleClass('www');

HTML කේතය මෙලෙස පෙනෙනු ඇත:

html<p id="test" class="eee ggg">පෙළ</p>

මේවාත් බලන්න

  • addClass, removeClass, hasClass ක්‍රම
  • JavaScript ගුණාංගය classList,
    එහි ආධාරයෙන් පිරිසිදු JavaScript හරහා පංතියක් එකතු කිරීම/ඉවත් කිරීම ප්‍රත්‍යාවර්තනය කළ හැකිය