{"id":5126,"date":"2019-10-16T17:18:29","date_gmt":"2019-10-16T11:48:29","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=5126"},"modified":"2019-10-17T09:48:59","modified_gmt":"2019-10-17T04:18:59","slug":"how-to-change-css-property-using-onclick","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-change-css-property-using-onclick\/","title":{"rendered":"HOW TO CHANGE CSS PROPERTY USING ONCLICK"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">HOW TO CHANGE CSS PROPERTY USING ONCLICK<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"mce_0\">Date posted: <strong>16\/10\/2019<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we will explain how to add CSS classes when click the button using javascript function.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>document.getElementById()<\/strong> method used to get the element with the specified id.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n\t&lt;title>JAVA SCRIPT&lt;\/title>\n&lt;\/head>\n&lt;style type=\"text\/css\">\n\t\n\t  .change_red{ \n\t  \t       font-size: 20px;\n               color: white;\n\t  \t       width: 13pc;\n\t  \t       height: 2pc;\n                background-color: red; \n                padding:5px; \n                border:1px solid black; \n                border-radius:3px; \n              } \n      .change_green{ \n               font-size: 20px;\n                color: white;\n      \t        width: 13pc;\n                height: 2pc;\n                background-color: green; \n                padding:5px; \n                border:1px solid black; \n                border-radius:3px; \n               } &lt;\/style>\n&lt;body>\n&lt;center>\n\t&lt;p>JAVA SCRIPT&lt;\/p>\n\t&lt;button class=\"change_red\" onclick=\"myFunction()\" id=\"mybutton\">OK&lt;\/button>\n&lt;\/center>\n&lt;\/body>\n\n\n\n\n\tfunction myFunction() \n\t{\n\t\tdocument.getElementById('mybutton').className = \"change_green\";\n    }\n\n\n\n\n\n&lt;\/html><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><em><strong>Before clicking the &#8220;OK&#8221; button:<\/strong><\/em><\/h4>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img fetchpriority=\"high\" decoding=\"async\" width=\"496\" height=\"122\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-16-at-17.12.39.png\" alt=\"\" data-id=\"5131\" data-link=\"https:\/\/pheonixsolutions.com\/blog\/?attachment_id=5131\" class=\"wp-image-5131\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-16-at-17.12.39.png 496w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-16-at-17.12.39-300x74.png 300w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em>After clicking the &#8220;OK&#8221; button:<\/em><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" width=\"393\" height=\"131\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-16-at-17.09.50.png\" alt=\"\" data-id=\"5129\" data-link=\"https:\/\/pheonixsolutions.com\/blog\/?attachment_id=5129\" class=\"wp-image-5129\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-16-at-17.09.50.png 393w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/10\/Screenshot-2019-10-16-at-17.09.50-300x100.png 300w\" sizes=\"(max-width: 393px) 100vw, 393px\" \/><\/figure><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for using phoenix solutions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HOW TO CHANGE CSS PROPERTY USING ONCLICK Date posted: 16\/10\/2019 In this tutorial, we will explain how to add CSS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[661],"class_list":["post-5126","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-javascript","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1kG","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=5126"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5126\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=5126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=5126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=5126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}