{"id":3432,"date":"2023-01-18T16:53:18","date_gmt":"2023-01-18T16:53:18","guid":{"rendered":"https:\/\/corbinrose.com\/blog\/?p=3432"},"modified":"2023-01-18T16:53:18","modified_gmt":"2023-01-18T16:53:18","slug":"vanilla-javascript-check-for-class-on-element","status":"publish","type":"post","link":"https:\/\/corbinrose.com\/blog\/technology\/vanilla-javascript-check-for-class-on-element\/","title":{"rendered":"Vanilla JavaScript Check for Class on Element"},"content":{"rendered":"\n<p>Sometimes, devs can rely on jQuery a&nbsp;<em>little<\/em>&nbsp;too much, and forget how to check for a className without a framework to help. Granted<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>$(elem).hasClass(&quot;className&quot;);<\/code><\/pre><\/div>\n\n\n\n<p>is easy. But sometimes, one must go jquery free!<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>el.classList.contains(className);<\/code><\/pre><\/div>\n\n\n\n<p><small>However, the&nbsp;<code>.contains<\/code>&nbsp;is not supported by all browsers<\/small><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>So, you can always fallback to good ole<code>indexOf<\/code><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>function hasClass(el, className) {\n    return (&#39; &#39; + el.className + &#39; &#39;).indexOf(&#39; &#39; + className+ &#39; &#39;) &gt; -1;\n}<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes, devs can rely on jQuery a\u00a0little\u00a0too much, and forget how to check for a className without a framework to help. <\/p>\n","protected":false},"author":2,"featured_media":5347,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[28,17],"tags":[],"class_list":["post-3432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-technology","clearfix","post-index"],"acf":[],"jetpack_featured_media_url":"https:\/\/corbinrose.com\/blog\/wp-content\/uploads\/2023\/01\/chris-ried-ieic5Tq8YMk-unsplash-scaled-1-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/comments?post=3432"}],"version-history":[{"count":0,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3432\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media\/5347"}],"wp:attachment":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media?parent=3432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/categories?post=3432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/tags?post=3432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}