{"id":56,"date":"2010-07-21T04:22:00","date_gmt":"2010-07-21T04:22:00","guid":{"rendered":"http:\/\/www.codeboss.in\/web-funda\/?p=56"},"modified":"2010-07-21T04:22:00","modified_gmt":"2010-07-21T04:22:00","slug":"change-css-class-with-javascript","status":"publish","type":"post","link":"https:\/\/codeboss.in\/web-funda\/2010\/07\/21\/change-css-class-with-javascript\/","title":{"rendered":"Change CSS Class With JavaScript"},"content":{"rendered":"<p>If we need to change the CSS class of a div or any other element with onclick or onmouseover etc. dynamically using JavaScript, you can do so using className. Follow the below example &#8211;<\/p>\n<pre class=\"brush:html;\">\n<style>\n.firstClass{ \nborder:1px solid #000000;\n}\n.secondClass{\nborder:1px solid #FF0000;\n}\n<\/style>\n<div class=\"firstClass\" onclick=\"this.className = 'secondClass';\">\nClick here to see the class change\n<\/div>\n<div class=\"firstClass\" id=\"divid\" onmouseover=\"changeClass(this,'secondClass')\" onmouseout=\"changeClass(this,'firstClass')\">\nMouse over to see the class change\n<\/div>\n<script type=\"text\/javascript\">\nfunction changeClass(elm,class){\nelm.className = class;\n}\n<\/script>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>If we need to change the CSS class of a div or any other element with onclick or onmouseover etc. dynamically using JavaScript, you can do so using className. Follow the below example &#8211; Click here to see the class change Mouse over to see the class change<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[36,48,51],"class_list":["post-56","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-css","tag-html","tag-javascript-2","entry"],"_links":{"self":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":0,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"wp:attachment":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}