Toggle a class

Javascript இல் classlist இல் இருக்கும் toggle என்ற method ஆனது நாம் argument ஆக அனுப்பும் class ஆனது element இல் இருந்தால் remove செய்கிறது இல்லை என்றால் add செய்கிறது.

element.classList.toggle('classname');

Note: இங்கு javascript இல் இருக்கும் classList இல் toggle என்ற method ஆனது ஒரு classname ஐ argument ஆக accept செய்கிறது. இங்கு இந்த classname ஐ வைத்துகொண்டு அந்த class ஆனது குறிப்பிட்ட element இல் class இருந்தால் remove செய்கிறது இல்லை என்றால் add செய்கிறது. இங்கு முதலில் element ஐ select செய்து பிறகு class ஆனது அமைந்துள்ளதா என்பதை கண்டறியலாம்.

Example1


<html>
<body>
<div id="content" class="linto website">JavaScript classList</div>
<script>
       let div = document.querySelector('#content');
       div.classList.toggle('learn-programming');
       for (let cssClass of div.classList) {
       document.writeln(cssClass);
      }
</script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு document.querySelector('#content') என்ற முறையை பயன்படுத்தி content என்ற id கொண்ட ஒரு element ஐ select செய்து கொள்கிறோம். பிறகு அதனை div என்ற variable இல் store செய்து கொள்கிறோம். இங்கு div.classList.toggle('learn-programming') என்ற toggle function மூலம் learn-programming என்ற class ஆனது நாம் select செய்த element இல் உள்ளதா என்பதை கண்டறிய பயன்படுகிறது.இங்கு class ஆனது இல்லை எனவே இந்த class ஐ element இல் add செய்கிறது.

Output: 

linto 
website
learn-programming

Example2


<html>
<body>
<div id="content" class="parallel codes youtube">JavaScript classList</div>
<script>
       let div = document.querySelector('#content');
       div.classList.toggle('youtube');
       for (let cssClass of div.classList) {
       document.writeln(cssClass);
      }
</script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு document.querySelector('#content') என்ற முறையை பயன்படுத்தி content என்ற id கொண்ட ஒரு element ஐ select செய்து கொள்கிறோம். பிறகு அதனை div என்ற variable இல் store செய்து கொள்கிறோம். இங்கு div.classList.toggle('youtube') என்ற toggle function மூலம் youtube என்ற class ஆனது நாம் select செய்த element இல் உள்ளதா என்பதை கண்டறிய பயன்படுகிறது.இங்கு class ஆனது உள்ளது எனவே இந்த class ஐ element இல் remove செய்கிறது.

Output: 

parallel
codes

Comments