{"id":15631,"date":"2016-05-22T14:53:47","date_gmt":"2016-05-22T14:53:47","guid":{"rendered":"http:\/\/www.oracletutoring.ca\/blog\/?p=15631"},"modified":"2018-11-14T05:03:13","modified_gmt":"2018-11-14T05:03:13","slug":"web-design-javascript-changing-style-of-an-element","status":"publish","type":"post","link":"https:\/\/www.oracletutoring.ca\/blog\/web-design-javascript-changing-style-of-an-element\/","title":{"rendered":"Web design:  JavaScript:  changing style of an element"},"content":{"rendered":"<h1>The tutor returns to JavaScript to talk about changing element style.<\/h1>\n<p><script src=\"\/..\/javascripts\/changecolmay22.js\"><\/script><\/p>\n<p id=\"p0\">With JavaScript, the appearance of an element on the page can be changed by actions offered to the visitor.  For example, the button below can be clicked to change this paragraph.<\/p>\n<p><button onclick=\"changecol()\" style=\"display:block;margin:auto;color:white;background-color:brown\">Click me to change the paragraph above.<\/button><\/p>\n<p>The command to change an element&#8217;s text color to green from within a JavaScript function is<\/p>\n<p><span style=\"font-family:monospace\">document.getElementById(&#8220;element_id&#8221;).style.color=&#8221;green&#8221;;<\/span><\/p>\n<p>The command to increase an element&#8217;s font size by 75% is<\/p>\n<p><span style=\"font-family:monospace\">document.getElementById(&#8220;element_id&#8221;).style.fontSize=&#8221;175%&#8221;;<\/span><\/p>\n<p>I&#8217;ll be discussing more JavaScript style changes in coming posts:)<\/p>\n<p>Source:<\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/jsref\/dom_obj_style.asp\">w3schools<\/a><\/p>\n<p>Jack of <a href=\"https:\/\/www.oracletutoring.ca\">Oracle Tutoring by Jack and Diane,<\/a> Campbell River, BC.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The tutor returns to JavaScript to talk about changing element style. With JavaScript, the appearance of an element on the page can be changed by actions offered to the visitor. For example, the button below can be clicked to change &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/www.oracletutoring.ca\/blog\/web-design-javascript-changing-style-of-an-element\/\"> <span class=\"screen-reader-text\">Web design:  JavaScript:  changing style of an element<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105,837],"tags":[205,1614],"class_list":["post-15631","post","type-post","status-publish","format-standard","hentry","category-computer-science","category-web-design","tag-javascript","tag-javascript-change-style"],"_links":{"self":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/15631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/comments?post=15631"}],"version-history":[{"count":20,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/15631\/revisions"}],"predecessor-version":[{"id":36162,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/15631\/revisions\/36162"}],"wp:attachment":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/media?parent=15631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/categories?post=15631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/tags?post=15631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}