Add one or more classes to the class list of an element

Javascript இல் ஒரு குறிப்பிட்ட element இல் class ஐ add செய்வதற்கு பயன்படுகிறது. இங்கு classList இல் இருக்கும் add என்ற method ஆனது குறிப்பிட்ட element இல் class ஐ add செய்வதற்கு பயன்படுகிறது.

element.classList.add('classname');

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

Example1


<html>
<body>
<div id="content">JavaScript classList</div>
<script>
       let div = document.querySelector('#content');
       div.classList.add('parallel','codes');
       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.add('parallel','codes') என்ற add function மூலம் 'parallel','codes' என்ற இரண்டு class களை add செய்கிறோம். பிறகு for of loop ஐ பயன்படுத்தி இங்கு element இல் இருக்கும் class ஐ தனித்தனியாக எடுத்துகொள்ளலாம்.

Output: 

parallel 
codes

Example2


<html>
<body>
<div id="content">JavaScript classList</div>
<script>
       let div = document.querySelector('#content');
       div.classList.add('linto','website');
       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.add('linto','website') என்ற add function மூலம் 'linto','website' என்ற இரண்டு class களை add செய்கிறோம். பிறகு for of loop ஐ பயன்படுத்தி இங்கு element இல் இருக்கும் class ஐ தனித்தனியாக எடுத்துகொள்ளலாம்.

Output: 

linto
website

Comments