Replace a class of an element

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

element.classList.replace('oldclass','newclass');

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

Example1


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

Output: 

parallel 
codes 
youtube-tamil

Example2


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

Output: 

linto 
website
learn-programming

Comments