Assuming you have an element in the DOM:<\/p>\n\n\n\n
<div id=\"el\"><\/div><\/code><\/pre>\n\n\n\nGet a reference to that DOM element:<\/p>\n\n\n\n
const el = document.querySelector(\"#el\");<\/code><\/pre>\n\n\n\nThen 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\nBrowser Support<\/h3>\n\nThis 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> 142<\/span><\/td> 144<\/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 […]<\/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":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"class_list":["post-306845","page","type-page","status-publish","hentry"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack-related-posts":[{"id":248134,"url":"https:\/\/css-tricks.com\/videos\/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","author":"Chris Coyier","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","block_context":{"text":"With 14 comments","link":"https:\/\/css-tricks.com\/videos\/150-hey-designers-know-one-thing-javascript-recommend\/#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","author":"Sara Cope","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: