Get the CSS classes of an element

Javascript இல் ஒரு குறிப்பிட்ட element இல் இருக்கும் css class ஐ கண்டறிய பயன்படுகிறது, இதனை நாம் iterate செய்து எடுத்துகொள்ளலாம்.

element.classList;

Note: CSS classList இங்கு ஒரு element இல் இருக்கும் class list ஐ கண்டறிய பயன்படுகிறது. இங்கு முதலில் ஒரு element ஐ select செய்து கொண்ட பிறகு element இல் இருக்கும் css class ஐ கண்டறிய பயன்படுகிறது, இதனை நாம் iterate செய்து எடுத்துகொள்ளலாம்.

Example1


<html>
<body>
<div id="content" class="main red">JavaScript classList</div>
<script>
       let div = document.querySelector('#content');
       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 என ஒரு iterable variable ஆக கிடைக்கிறது, எனவே நாம் for of loop ஐ பயன்படுத்தி இங்கு element இல் இருக்கும் class ஐ தனித்தனியாக எடுத்துகொள்ளலாம்.

Output: 

main 
red

Example2


<html>
<body>
<div id="content" class="learn programming tamil">Parallel Codes</div>
<script>
       let div = document.querySelector('#content');
       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 என ஒரு iterable variable ஆக கிடைக்கிறது, எனவே நாம் for of loop ஐ பயன்படுத்தி இங்கு element இல் இருக்கும் class ஐ தனித்தனியாக எடுத்துகொள்ளலாம்.

Output: 

learn 
programming
tamil

Comments