{"id":306845,"date":"2020-04-20T06:58:03","date_gmt":"2020-04-20T13:58:03","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=306845"},"modified":"2020-05-31T06:04:55","modified_gmt":"2020-05-31T13:04:55","slug":"the-classlist-api","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/javascript\/the-classlist-api\/","title":{"rendered":"The .classList() API"},"content":{"rendered":"\n

Assuming you have an element in the DOM:<\/p>\n\n\n\n

<div id=\"el\"><\/div><\/code><\/pre>\n\n\n\n
Get a reference to that DOM element:<\/p>\n\n\n\n
const el = document.querySelector(\"#el\");<\/code><\/pre>\n\n\n\n
Then you can manipulate the classes on that element with the classList<\/code> method.<\/p>\n\n\n\n
\/\/ Add a class\nel.classList.add(\"open\");\n\n\/\/ Add many classes\nel.classList.add(\"this\", \"little\", \"piggy\");\nlet classes = [\"is-message\", \"is-warning\"];\nel.classList.add(...classes);\n\n\/\/ Remove a class\nel.classList.remove(\"open\");\n\n\/\/ Remove multiple classes\nel.classList.remove(\"this\", \"little\", \"piggy\");\n\n\/\/ Loop over each class\nel.classList; \/\/ DOMTokenList (pretty much an array)\nel.classList.forEach(className => {\n  \/\/ don't use \"class\" as that's a reserved word\n  console.log(className);\n});\nfor (let className of $0.classList) {\n  console.log(className);\n}\n\nel.classList.length; \/\/ integer of how many classes there are\n\n\/\/ Replace a class (replaces first with second)\nel.classList.replace(\"is-big\", \"is-small\");\n\n\/\/ Toggle a class (if it's there, remove it, if it's not there, add it)\nel.classList.toggle(\"open\");\n\/\/ Remove the class\nel.classList.toggle(\"open\", false);\n\/\/ Add the class\nel.classList.toggle(\"open\", true);\n\/\/ Add the class with logic\nel.classList.toggle(\"raining\", weather === \"raining\");\n\n\/\/ Check if element has class (returns true or false)\nel.classList.contains(\"open\");\n\n\/\/ Look at individual classes <div class=\"hot dog\">\nel.classList.item(0); \/\/ hot\nel.classList.item(1); \/\/ dog\nel.classList.item(2); \/\/ null\nel.classList[1]; \/\/ dog\n\n<\/code><\/pre>\n\n\n
Browser Support<\/h3>\n\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
28<\/span><\/td>26<\/span><\/td>11<\/span><\/td>12<\/span><\/td>7<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
124<\/span><\/td>125<\/span><\/td>4.4<\/span><\/td>7.0-7.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
Assuming you have an element in the DOM: Get a reference to that DOM element: Then you can manipulate the classes on that element with the classList method. Browser Support<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3357,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":248134,"url":"https:\/\/css-tricks.com\/video-screencasts\/150-hey-designers-know-one-thing-javascript-recommend\/","url_meta":{"origin":306845,"position":0},"title":"#150: Hey designers, if you only know one thing about JavaScript, this is what I would recommend","date":"November 23, 2016","format":false,"excerpt":"Sometimes, to start a journey into learning something huge and complex, you need to learn something small and simple. JavaScript is huge and complex, but you can baby step into it by learning small and simple things. If you're a web designer, I think there is one thing in particular\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14164,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/class\/","url_meta":{"origin":306845,"position":1},"title":"Class","date":"September 6, 2011","format":false,"excerpt":"A class selector in CSS starts with a dot (.), like this: .class { } A class selector selects all elements with a matching class attribute. For example, this element: