{"id":289,"date":"2010-07-27T06:20:48","date_gmt":"2010-07-27T10:20:48","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/programming-blog\/?p=289"},"modified":"2012-12-03T06:49:49","modified_gmt":"2012-12-03T10:49:49","slug":"change-your-page-background-color-dynamically-using-java-script","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/programming-blog\/change-your-page-background-color-dynamically-using-java-script\/","title":{"rendered":"Change Your Page Background Color Dynamically using Java Script"},"content":{"rendered":"
Following code is used to change a page color from your select option in select box.<\/div>\n

Copy and Paste following code in a simple HTML page.<\/h3>\n

[html]
\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">
\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">
\n\t<head>
\n\t\t<meta http-equiv="Content-Type" content="text\/html; charset=UTF-8">
\n\t\t<title>Change Your page Background Color Using Java Script<\/title>
\n\t\t<script type="text\/javascript">
\n\t\t\tfunction changeTheme(selColor) {
\n\t\t\t\talert(selColor);
\n\t\t\t\tdocument.body.style.backgroundColor = selColor;
\n\t\t\t}
\n\t\t<\/script><\/p>\n

\t<\/head>
\n\t<body>
\n\t<h1>Please Select Your Page Background Color..<\/h1>
\n\t\t<select name="changescheme" id="changescheme" onChange="javascript:changeTheme(this.value)">
\n\t\t\t<option value="white">White<\/option>
\n\t\t\t<option value="red">Red<\/option>
\n\t\t\t<option value="blue">Blue<\/option>
\n\t\t\t<option value="orange">Orange<\/option>
\n\t\t\t<option value="black">Black<\/option>
\n\t\t<\/select>
\n\t<\/body>
\n<\/html>
\n[\/html]<\/p>\n","protected":false},"excerpt":{"rendered":"

Following code is used to change a page color from your select option in select box. Copy and Paste following code in a simple HTML page. [html] <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"> <html xmlns="http:\/\/www.w3.org\/1999\/xhtml"> <head> <meta http-equiv="Content-Type" content="text\/html; charset=UTF-8"> <title>Change Your page Background Color Using Java Script<\/title> <script type="text\/javascript"> function changeTheme(selColor) { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[144,142,143],"class_list":["post-289","post","type-post","status-publish","format-standard","hentry","category-programming","tag-change-page-color-dynamic","tag-css","tag-stylesheet"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts\/289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/comments?post=289"}],"version-history":[{"count":25,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":703,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts\/289\/revisions\/703"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/media?parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/categories?post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/tags?post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}