![\"How](\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/Change-Class-Name-To-An-Element-In-JavaScript.jpg\")
<\/p>\n
Previous JavaScript Articles<\/h3>\n\n- JavaScript Variables<\/a><\/li>\n
- JavaScript Operators<\/a><\/li>\n
- Creating an Object in JavaScript<\/a><\/li>\n
- Introduction to Asynchronous JavaScript<\/a><\/li>\n
- Control Flow in JavaScript<\/a><\/li>\n
- What is JavaScript Regex?<\/a><\/li>\n
- JavaScript Events Example<\/a><\/li>\n
- How to create a preloader in JavaScript?<\/a><\/li>\n
- forEach method in JavaScript<\/a><\/li>\n
- Sorting Arrays in JavaScript<\/a><\/li>\n
- Linear Search in JavaScript<\/a><\/li>\n
- Pagination in Vanilla JavaScript<\/a><\/li>\n
- Transform Arrays with Map() Method<\/a><\/li>\n<\/ul>\n
Using the className property<\/h2>\n
The simplest way to change an element’s class with JavaScript is to use the className property, which returns or sets the value of the class attribute as a string. For example, if we have an element with id=”myDiv” and class=”red”, we can change its class to “blue” by using this code:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nmyDiv.className = \"blue\";\r\n<\/pre>\nThis will replace the existing class value with the new one. If we want to add a new class without removing the existing one, we can use the += operator to append the new class to the existing value, separated by a space. For example:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nmyDiv.className += \" big\";\r\n<\/pre>\nThis will add the class “big” to the element, resulting in class=”red big”. Note that this method does not check for duplicate classes, so if we run this code again, it will add another “big” class to the element.<\/p>\n
You can purchase your\u00a0hosting from Cloudsurph.com<\/a>,\u00a0Cloudsurph hosting<\/a>\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs<\/strong>.<\/em><\/h5>\nUsing the classList property<\/h2>\n
A more modern and convenient way to change an element’s class with JavaScript is to use the classList property, which returns a DOMTokenList object that represents the list of classes of the element. The classList property has several methods that allow us to add, remove, toggle, or check for classes. For example, if we have an element with id=”myDiv” and class=”red”, we can use these methods as follows:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\n\/\/ Add a new class\r\nmyDiv.classList.add(\"big\");\r\n\r\n\/\/ Remove an existing class\r\nmyDiv.classList.remove(\"red\");\r\n\r\n\/\/ Toggle a class (add it if it does not exist, remove it if it does)\r\nmyDiv.classList.toggle(\"blue\");\r\n\r\n\/\/ Check if an element has a specific class\r\nvar hasRed = myDiv.classList.contains(\"red\"); \/\/ returns false\r\n<\/pre>\nThe classList property also has a length property that returns the number of classes of the element, and an item method that returns the class at a given index. For example:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\n\/\/ Get the number of classes\r\nvar numClasses = myDiv.classList.length; \/\/ returns 2\r\n\r\n\/\/ Get the first class\r\nvar firstClass = myDiv.classList.item(0); \/\/ returns \"big\"\r\n<\/pre>\nThe classList property is supported by most modern browsers, but not by IE9 and older versions. If you need to support older browsers, you can use a polyfill or fallback to the className property.<\/p>\n
Using the setAttribute method<\/h2>\n
Another way to change an element’s class with JavaScript is to use the setAttribute method, which sets or updates the value of a specified attribute of an element. For example, if we have an element with id=”myDiv” and class=”red”, we can change its class to “blue” by using this code:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nmyDiv.setAttribute(\"class\", \"blue\");\r\n<\/pre>\nThis will replace the existing class value with the new one. If we want to add a new class without removing the existing one, we can use the getAttribute method to get the current value of the class attribute and then append the new class to it. For example:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nvar currentClass = myDiv.getAttribute(\"class\");\r\n\r\nmyDiv.setAttribute(\"class\", currentClass + \" big\");\r\n<\/pre>\nThis will add the class “big” to the element, resulting in class=”red big”. Note that this method does not check for duplicate classes, so if we run this code again, it will add another “big” class to the element.<\/p>\n
The setAttribute method works with any attribute of an element, not just the class attribute. However, it is not recommended to use it for changing style attributes, as it may cause conflicts with CSS rules or inline styles. Instead, you should use the style property or CSSOM methods for manipulating styles.<\/p>\n
Conclusion<\/h3>\n
In this blog post, we have learned how to change an element’s class with JavaScript in three different ways: using the className property, using the classList property, and using the setAttribute method. Each method has its own advantages and disadvantages, so you should choose the one that suits your needs and browser compatibility requirements.<\/p>\n
If you want then buy a good, reliable, secure web\u00a0hosting<\/a>\u00a0service \u00a0from here:\u00a0click here<\/a><\/strong><\/em><\/h5>\nThat\u2019s it. If you enjoyed reading this article and have more questions please reach out to our\u00a0support team<\/a>\u00a0via live chat or\u00a0email<\/a>\u00a0and we would be glad to help you. we provide server\u00a0hosting<\/a>\u00a0for all types of need and we can even get your\u00a0server<\/a>\u00a0up and running with the service of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":"One of the most common tasks in web development is to manipulate the appearance and behavior of HTML elements using JavaScript. One way to do this is to change the element’s class attribute, which can affect how the element is styled by CSS rules or how it is targeted by other JavaScript functions. In this […]<\/p>\n","protected":false},"author":8,"featured_media":5518,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[157,25,162,159,44,1],"tags":[54,47,105,103,48,113],"class_list":["post-5517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-centos-7","category-web-hosting-virtualization","category-javascript","category-linux-server","category-kvm-xen","category-virtual-private-servers","tag-best-vps-hosting-server-maryland","tag-cheap-cloud-servers","tag-cheap-storage-server-hosting","tag-cheapest-vps","tag-dedicated-server-hosting-in-washington-d-c","tag-speed-test-vps"],"yoast_head":"\n
How to change an element's class with JavaScript<\/title>\n<meta name=\"description\" content=\"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to change an element's class with JavaScript\" \/>\n<meta property=\"og:description\" content=\"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudsurph Web Hosting Washington D.C.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CloudSurph\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-28T13:38:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-28T13:40:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1264\" \/>\n\t<meta property=\"og:image:height\" content=\"760\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cloudsurph\" \/>\n<meta name=\"twitter:site\" content=\"@Cloud_Surph\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rony\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\"},\"author\":{\"name\":\"Rony\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\"},\"headline\":\"How to change an element’s class with JavaScript\",\"datePublished\":\"2023-03-28T13:38:53+00:00\",\"dateModified\":\"2023-03-28T13:40:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\"},\"wordCount\":810,\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"keywords\":[\"Best VPS hosting server Maryland\",\"Cheap Cloud Servers\",\"Cheap Storage Server Hosting\",\"Cheapest VPS\",\"Dedicated Server Hosting in Washington D.C\",\"Speed test VPS\"],\"articleSection\":[\"CentOS 7\",\"Cloud Hosting\",\"JavaScript\",\"Linux Server\",\"Virtualization\",\"VPS Servers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\",\"name\":\"How to change an element's class with JavaScript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"datePublished\":\"2023-03-28T13:38:53+00:00\",\"dateModified\":\"2023-03-28T13:40:39+00:00\",\"description\":\"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"width\":1264,\"height\":760,\"caption\":\"How can I change an element's class with JavaScript?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cloudsurph.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to change an element’s class with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"name\":\"Cloudsurph Web Hosting Washington D.C.\",\"description\":\"Dedicated Server Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.cloudsurph.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\",\"name\":\"CloudSurph Technology Solutions\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"width\":2348,\"height\":1692,\"caption\":\"CloudSurph Technology Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/CloudSurph\\\/\",\"https:\\\/\\\/x.com\\\/Cloud_Surph\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\",\"name\":\"Rony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"caption\":\"Rony\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/cloudsurph\"],\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/author\\\/ron\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to change an element's class with JavaScript","description":"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to change an element's class with JavaScript","og_description":"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute","og_url":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","og_site_name":"Cloudsurph Web Hosting Washington D.C.","article_publisher":"https:\/\/www.facebook.com\/CloudSurph\/","article_published_time":"2023-03-28T13:38:53+00:00","article_modified_time":"2023-03-28T13:40:39+00:00","og_image":[{"width":1264,"height":760,"url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","type":"image\/jpeg"}],"author":"Rony","twitter_card":"summary_large_image","twitter_creator":"@cloudsurph","twitter_site":"@Cloud_Surph","twitter_misc":{"Written by":"Rony","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#article","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/"},"author":{"name":"Rony","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed"},"headline":"How to change an element’s class with JavaScript","datePublished":"2023-03-28T13:38:53+00:00","dateModified":"2023-03-28T13:40:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/"},"wordCount":810,"publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","keywords":["Best VPS hosting server Maryland","Cheap Cloud Servers","Cheap Storage Server Hosting","Cheapest VPS","Dedicated Server Hosting in Washington D.C","Speed test VPS"],"articleSection":["CentOS 7","Cloud Hosting","JavaScript","Linux Server","Virtualization","VPS Servers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","url":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","name":"How to change an element's class with JavaScript","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","datePublished":"2023-03-28T13:38:53+00:00","dateModified":"2023-03-28T13:40:39+00:00","description":"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute","breadcrumb":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","width":1264,"height":760,"caption":"How can I change an element's class with JavaScript?"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cloudsurph.com\/"},{"@type":"ListItem","position":2,"name":"How to change an element’s class with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.cloudsurph.com\/#website","url":"https:\/\/www.cloudsurph.com\/","name":"Cloudsurph Web Hosting Washington D.C.","description":"Dedicated Server Hosting","publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cloudsurph.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.cloudsurph.com\/#organization","name":"CloudSurph Technology Solutions","url":"https:\/\/www.cloudsurph.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","width":2348,"height":1692,"caption":"CloudSurph Technology Solutions"},"image":{"@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CloudSurph\/","https:\/\/x.com\/Cloud_Surph"]},{"@type":"Person","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed","name":"Rony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","caption":"Rony"},"sameAs":["https:\/\/x.com\/cloudsurph"],"url":"https:\/\/www.cloudsurph.com\/author\/ron\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/comments?post=5517"}],"version-history":[{"count":1,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5517\/revisions"}],"predecessor-version":[{"id":5520,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5517\/revisions\/5520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media\/5518"}],"wp:attachment":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media?parent=5517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/categories?post=5517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/tags?post=5517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Using the className property<\/h2>\n
The simplest way to change an element’s class with JavaScript is to use the className property, which returns or sets the value of the class attribute as a string. For example, if we have an element with id=”myDiv” and class=”red”, we can change its class to “blue” by using this code:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nmyDiv.className = \"blue\";\r\n<\/pre>\nThis will replace the existing class value with the new one. If we want to add a new class without removing the existing one, we can use the += operator to append the new class to the existing value, separated by a space. For example:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nmyDiv.className += \" big\";\r\n<\/pre>\nThis will add the class “big” to the element, resulting in class=”red big”. Note that this method does not check for duplicate classes, so if we run this code again, it will add another “big” class to the element.<\/p>\n
You can purchase your\u00a0hosting from Cloudsurph.com<\/a>,\u00a0Cloudsurph hosting<\/a>\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs<\/strong>.<\/em><\/h5>\n
Using the classList property<\/h2>\n
A more modern and convenient way to change an element’s class with JavaScript is to use the classList property, which returns a DOMTokenList object that represents the list of classes of the element. The classList property has several methods that allow us to add, remove, toggle, or check for classes. For example, if we have an element with id=”myDiv” and class=”red”, we can use these methods as follows:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\n\/\/ Add a new class\r\nmyDiv.classList.add(\"big\");\r\n\r\n\/\/ Remove an existing class\r\nmyDiv.classList.remove(\"red\");\r\n\r\n\/\/ Toggle a class (add it if it does not exist, remove it if it does)\r\nmyDiv.classList.toggle(\"blue\");\r\n\r\n\/\/ Check if an element has a specific class\r\nvar hasRed = myDiv.classList.contains(\"red\"); \/\/ returns false\r\n<\/pre>\nThe classList property also has a length property that returns the number of classes of the element, and an item method that returns the class at a given index. For example:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\n\/\/ Get the number of classes\r\nvar numClasses = myDiv.classList.length; \/\/ returns 2\r\n\r\n\/\/ Get the first class\r\nvar firstClass = myDiv.classList.item(0); \/\/ returns \"big\"\r\n<\/pre>\nThe classList property is supported by most modern browsers, but not by IE9 and older versions. If you need to support older browsers, you can use a polyfill or fallback to the className property.<\/p>\n
Using the setAttribute method<\/h2>\n
Another way to change an element’s class with JavaScript is to use the setAttribute method, which sets or updates the value of a specified attribute of an element. For example, if we have an element with id=”myDiv” and class=”red”, we can change its class to “blue” by using this code:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nmyDiv.setAttribute(\"class\", \"blue\");\r\n<\/pre>\nThis will replace the existing class value with the new one. If we want to add a new class without removing the existing one, we can use the getAttribute method to get the current value of the class attribute and then append the new class to it. For example:<\/p>\n
\r\nvar myDiv = document.getElementById(\"myDiv\");\r\n\r\nvar currentClass = myDiv.getAttribute(\"class\");\r\n\r\nmyDiv.setAttribute(\"class\", currentClass + \" big\");\r\n<\/pre>\nThis will add the class “big” to the element, resulting in class=”red big”. Note that this method does not check for duplicate classes, so if we run this code again, it will add another “big” class to the element.<\/p>\n
The setAttribute method works with any attribute of an element, not just the class attribute. However, it is not recommended to use it for changing style attributes, as it may cause conflicts with CSS rules or inline styles. Instead, you should use the style property or CSSOM methods for manipulating styles.<\/p>\n
Conclusion<\/h3>\n
In this blog post, we have learned how to change an element’s class with JavaScript in three different ways: using the className property, using the classList property, and using the setAttribute method. Each method has its own advantages and disadvantages, so you should choose the one that suits your needs and browser compatibility requirements.<\/p>\n
If you want then buy a good, reliable, secure web\u00a0hosting<\/a>\u00a0service \u00a0from here:\u00a0click here<\/a><\/strong><\/em><\/h5>\n
That\u2019s it. If you enjoyed reading this article and have more questions please reach out to our\u00a0support team<\/a>\u00a0via live chat or\u00a0email<\/a>\u00a0and we would be glad to help you. we provide server\u00a0hosting<\/a>\u00a0for all types of need and we can even get your\u00a0server<\/a>\u00a0up and running with the service of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the most common tasks in web development is to manipulate the appearance and behavior of HTML elements using JavaScript. One way to do this is to change the element’s class attribute, which can affect how the element is styled by CSS rules or how it is targeted by other JavaScript functions. In this […]<\/p>\n","protected":false},"author":8,"featured_media":5518,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[157,25,162,159,44,1],"tags":[54,47,105,103,48,113],"class_list":["post-5517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-centos-7","category-web-hosting-virtualization","category-javascript","category-linux-server","category-kvm-xen","category-virtual-private-servers","tag-best-vps-hosting-server-maryland","tag-cheap-cloud-servers","tag-cheap-storage-server-hosting","tag-cheapest-vps","tag-dedicated-server-hosting-in-washington-d-c","tag-speed-test-vps"],"yoast_head":"\n
How to change an element's class with JavaScript<\/title>\n<meta name=\"description\" content=\"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to change an element's class with JavaScript\" \/>\n<meta property=\"og:description\" content=\"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudsurph Web Hosting Washington D.C.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CloudSurph\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-28T13:38:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-28T13:40:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1264\" \/>\n\t<meta property=\"og:image:height\" content=\"760\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cloudsurph\" \/>\n<meta name=\"twitter:site\" content=\"@Cloud_Surph\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rony\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\"},\"author\":{\"name\":\"Rony\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\"},\"headline\":\"How to change an element’s class with JavaScript\",\"datePublished\":\"2023-03-28T13:38:53+00:00\",\"dateModified\":\"2023-03-28T13:40:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\"},\"wordCount\":810,\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"keywords\":[\"Best VPS hosting server Maryland\",\"Cheap Cloud Servers\",\"Cheap Storage Server Hosting\",\"Cheapest VPS\",\"Dedicated Server Hosting in Washington D.C\",\"Speed test VPS\"],\"articleSection\":[\"CentOS 7\",\"Cloud Hosting\",\"JavaScript\",\"Linux Server\",\"Virtualization\",\"VPS Servers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\",\"name\":\"How to change an element's class with JavaScript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"datePublished\":\"2023-03-28T13:38:53+00:00\",\"dateModified\":\"2023-03-28T13:40:39+00:00\",\"description\":\"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/How-to-change-an-elements-class-with-JavaScript.jpg\",\"width\":1264,\"height\":760,\"caption\":\"How can I change an element's class with JavaScript?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-change-an-elements-class-with-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cloudsurph.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to change an element’s class with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"name\":\"Cloudsurph Web Hosting Washington D.C.\",\"description\":\"Dedicated Server Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.cloudsurph.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\",\"name\":\"CloudSurph Technology Solutions\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"width\":2348,\"height\":1692,\"caption\":\"CloudSurph Technology Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/CloudSurph\\\/\",\"https:\\\/\\\/x.com\\\/Cloud_Surph\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\",\"name\":\"Rony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"caption\":\"Rony\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/cloudsurph\"],\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/author\\\/ron\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to change an element's class with JavaScript","description":"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to change an element's class with JavaScript","og_description":"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute","og_url":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","og_site_name":"Cloudsurph Web Hosting Washington D.C.","article_publisher":"https:\/\/www.facebook.com\/CloudSurph\/","article_published_time":"2023-03-28T13:38:53+00:00","article_modified_time":"2023-03-28T13:40:39+00:00","og_image":[{"width":1264,"height":760,"url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","type":"image\/jpeg"}],"author":"Rony","twitter_card":"summary_large_image","twitter_creator":"@cloudsurph","twitter_site":"@Cloud_Surph","twitter_misc":{"Written by":"Rony","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#article","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/"},"author":{"name":"Rony","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed"},"headline":"How to change an element’s class with JavaScript","datePublished":"2023-03-28T13:38:53+00:00","dateModified":"2023-03-28T13:40:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/"},"wordCount":810,"publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","keywords":["Best VPS hosting server Maryland","Cheap Cloud Servers","Cheap Storage Server Hosting","Cheapest VPS","Dedicated Server Hosting in Washington D.C","Speed test VPS"],"articleSection":["CentOS 7","Cloud Hosting","JavaScript","Linux Server","Virtualization","VPS Servers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","url":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/","name":"How to change an element's class with JavaScript","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","datePublished":"2023-03-28T13:38:53+00:00","dateModified":"2023-03-28T13:40:39+00:00","description":"How to change an element's class with JavaScript, How can I change an element's class with JavaScript, className, classList, setAttribute","breadcrumb":{"@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#primaryimage","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/How-to-change-an-elements-class-with-JavaScript.jpg","width":1264,"height":760,"caption":"How can I change an element's class with JavaScript?"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cloudsurph.com\/how-to-change-an-elements-class-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cloudsurph.com\/"},{"@type":"ListItem","position":2,"name":"How to change an element’s class with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.cloudsurph.com\/#website","url":"https:\/\/www.cloudsurph.com\/","name":"Cloudsurph Web Hosting Washington D.C.","description":"Dedicated Server Hosting","publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cloudsurph.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.cloudsurph.com\/#organization","name":"CloudSurph Technology Solutions","url":"https:\/\/www.cloudsurph.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","width":2348,"height":1692,"caption":"CloudSurph Technology Solutions"},"image":{"@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CloudSurph\/","https:\/\/x.com\/Cloud_Surph"]},{"@type":"Person","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed","name":"Rony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","caption":"Rony"},"sameAs":["https:\/\/x.com\/cloudsurph"],"url":"https:\/\/www.cloudsurph.com\/author\/ron\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/comments?post=5517"}],"version-history":[{"count":1,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5517\/revisions"}],"predecessor-version":[{"id":5520,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5517\/revisions\/5520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media\/5518"}],"wp:attachment":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media?parent=5517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/categories?post=5517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/tags?post=5517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}