{"id":307,"date":"2021-06-08T15:53:10","date_gmt":"2021-06-08T14:53:10","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=307"},"modified":"2021-06-08T16:10:53","modified_gmt":"2021-06-08T15:10:53","slug":"changing-element-styles","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/javascript\/changing-element-styles\/","title":{"rendered":"Changing Element Styles"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-197\" src=\"https:\/\/glow-prod-sh.s3.eu-west-1.amazonaws.com\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2021\/06\/05211153\/sqa-h-150x150.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&#038;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEE8aCWV1LXdlc3QtMSJHMEUCIQDxM6YiQF4yBmDtwowOJC6b0jigPQSzmCDDla3pVBEergIgd%2Ffi0R0XBZ1L5xyadjv6O9UY5bu1ij51I7HVNFl9wxwquAUIGBAFGgwyNzM1NzAxOTU0MzMiDMyrKtx%2FbKagKA8HGiqVBR%2FPei8m5kWAVB2X0nEDS5gp8EdxqcqrBLskmcQan6kHrsejKotuoe174dOd51ZpYrGX%2Fp2mMA7a0bAUetkMWYbJGx6GKK6lI4Id3oPdJlcMIkIfz1EzwTR6IitURBtHbfGmuSULSq7j7TIKEjF0gXsvRlqpmD6%2Fx6tgea1GlDur0AdaxsJpkBlvK0jXy3b5%2FAvlqIFT%2F3kL7W2N0Rk5BNoADSgEnAHJPCmFiinF8mCYW3Cp%2FBFZfYcFyNNcdWCdko0i6mAYDlqSN09nqXTpeiYgGH7NZgixaAuXcYvY0gZ2%2Fc5x02Vu7BIH5LdoXMhfAATm9MzlLfyTHF25DqXXDuoQe9Ex361M6obJh84c%2FDiHJCNTlLM17iNDg2Y%2BC2Ff4C4xXyN6qR49gTUk2tSsrRKtpEmikEyD7KF%2B3P8KNoKcRXpIAO%2B7kf6FpU8Ax6ezJoFBANOWAjwQuJ8yxXt7sJMkApCCaHpdj7Ss2T6oyR5S9KQP0ryOZVJ1R8JoWDN8Tlm67FqKqcAM7nd7AUmeAHcMtwHd%2FizNt7bnzljpE35dDs32f1hsM%2FigyoOAj6hRLsej61WaJySmYmsTHuu%2BytEVJw0TuFToLMvcoAYqKReMMroRmu1Dz6784BjEER65S1noS0W4NwczeKdhm1nAS6ubM%2BLjOi8SWw67NOWaMOUDUra3EpHOsi%2FLlwhbtJswh7TPJAEubpojAUcSBHU6ruGsZmBK9oJ%2F31kvp4z6iyV%2Fwlu85AS5%2BEV1KF0s1yuXz1b7JmgSlA4qk8ZwLQ9aKY%2B%2B981elKc8LvvwKnbJ0baOYXzcvnYVDdSKeOohDVd6w3hsGZoLJ3jy1saPjSzsjliuc5g3M%2FIMQ5DA2%2BsfDPkaxu%2B%2FQe8wspGXzwY6sQGbk%2BWiM5%2Ff%2B172cLYKeWgeM6VB%2BopX0%2Bbdhu74zBwjtEZ86%2BySIw1XhJWPicF2nUMkZK2afQj7sR3mBzEyXqFC6yAMmKmnyKg%2B9o64KuoXH6BIL6NJ2RIMx9kJ%2FRquyXLloQQAbr2idsvomYUXehzfAZORzrKFod4P5a2A55bi%2BlokZBOm1g%2BNAu%2BKqpWFjWmYXF6fw4Ww8KWCpnX3yWvW1GuOCp9o9zpMRaVTAL%2Fz%2F0A%3D&#038;X-Amz-Algorithm=AWS4-HMAC-SHA256&#038;X-Amz-Credential=ASIAT7MQN47UUQAL7HMR%2F20260420%2Feu-west-1%2Fs3%2Faws4_request&#038;X-Amz-Date=20260420T064420Z&#038;X-Amz-SignedHeaders=host&#038;X-Amz-Expires=900&#038;X-Amz-Signature=41f6d17f656552e8b01bc008c9e837991be43e61ba9e7e83bf12eda25f6142eb\" alt=\"\" width=\"100\" height=\"97\" \/><a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_css.asp\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"image-59 alignright\" src=\"https:\/\/glow-prod-sh.s3.eu-west-1.amazonaws.com\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2021\/06\/03210120\/w3schools-150x150.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&#038;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEE8aCWV1LXdlc3QtMSJHMEUCIQDxM6YiQF4yBmDtwowOJC6b0jigPQSzmCDDla3pVBEergIgd%2Ffi0R0XBZ1L5xyadjv6O9UY5bu1ij51I7HVNFl9wxwquAUIGBAFGgwyNzM1NzAxOTU0MzMiDMyrKtx%2FbKagKA8HGiqVBR%2FPei8m5kWAVB2X0nEDS5gp8EdxqcqrBLskmcQan6kHrsejKotuoe174dOd51ZpYrGX%2Fp2mMA7a0bAUetkMWYbJGx6GKK6lI4Id3oPdJlcMIkIfz1EzwTR6IitURBtHbfGmuSULSq7j7TIKEjF0gXsvRlqpmD6%2Fx6tgea1GlDur0AdaxsJpkBlvK0jXy3b5%2FAvlqIFT%2F3kL7W2N0Rk5BNoADSgEnAHJPCmFiinF8mCYW3Cp%2FBFZfYcFyNNcdWCdko0i6mAYDlqSN09nqXTpeiYgGH7NZgixaAuXcYvY0gZ2%2Fc5x02Vu7BIH5LdoXMhfAATm9MzlLfyTHF25DqXXDuoQe9Ex361M6obJh84c%2FDiHJCNTlLM17iNDg2Y%2BC2Ff4C4xXyN6qR49gTUk2tSsrRKtpEmikEyD7KF%2B3P8KNoKcRXpIAO%2B7kf6FpU8Ax6ezJoFBANOWAjwQuJ8yxXt7sJMkApCCaHpdj7Ss2T6oyR5S9KQP0ryOZVJ1R8JoWDN8Tlm67FqKqcAM7nd7AUmeAHcMtwHd%2FizNt7bnzljpE35dDs32f1hsM%2FigyoOAj6hRLsej61WaJySmYmsTHuu%2BytEVJw0TuFToLMvcoAYqKReMMroRmu1Dz6784BjEER65S1noS0W4NwczeKdhm1nAS6ubM%2BLjOi8SWw67NOWaMOUDUra3EpHOsi%2FLlwhbtJswh7TPJAEubpojAUcSBHU6ruGsZmBK9oJ%2F31kvp4z6iyV%2Fwlu85AS5%2BEV1KF0s1yuXz1b7JmgSlA4qk8ZwLQ9aKY%2B%2B981elKc8LvvwKnbJ0baOYXzcvnYVDdSKeOohDVd6w3hsGZoLJ3jy1saPjSzsjliuc5g3M%2FIMQ5DA2%2BsfDPkaxu%2B%2FQe8wspGXzwY6sQGbk%2BWiM5%2Ff%2B172cLYKeWgeM6VB%2BopX0%2Bbdhu74zBwjtEZ86%2BySIw1XhJWPicF2nUMkZK2afQj7sR3mBzEyXqFC6yAMmKmnyKg%2B9o64KuoXH6BIL6NJ2RIMx9kJ%2FRquyXLloQQAbr2idsvomYUXehzfAZORzrKFod4P5a2A55bi%2BlokZBOm1g%2BNAu%2BKqpWFjWmYXF6fw4Ww8KWCpnX3yWvW1GuOCp9o9zpMRaVTAL%2Fz%2F0A%3D&#038;X-Amz-Algorithm=AWS4-HMAC-SHA256&#038;X-Amz-Credential=ASIAT7MQN47UUQAL7HMR%2F20260420%2Feu-west-1%2Fs3%2Faws4_request&#038;X-Amz-Date=20260420T064420Z&#038;X-Amz-SignedHeaders=host&#038;X-Amz-Expires=900&#038;X-Amz-Signature=76ce3709eeedd8bd47ebbc9f3dc433554c6e4bc1ee2ba5002cf38bfc4840df19\" alt=\"\" width=\"50\" height=\"47\" \/><\/a>Once a function knows has a <a href=\"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/javascript\/referencing-page-elements\/\">reference for an element<\/a>, the style settings for that element can be modified.<\/p>\n<p>For Higher Computing Science, you need to be able to use JavaScript for:<\/p>\n<ul>\n<li>hiding page elements<\/li>\n<li>revealing page elements<\/li>\n<li>changing the position of an element<\/li>\n<li>changing the size of an element<\/li>\n<li>changing the colour of an element<\/li>\n<li>changing the look of text<\/li>\n<\/ul>\n<h1><a href=\"https:\/\/www.w3schools.com\/jsref\/dom_obj_style.asp\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"image-59 alignright\" src=\"https:\/\/glow-prod-sh.s3.eu-west-1.amazonaws.com\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2021\/06\/03210120\/w3schools-150x150.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&#038;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEE8aCWV1LXdlc3QtMSJHMEUCIQDxM6YiQF4yBmDtwowOJC6b0jigPQSzmCDDla3pVBEergIgd%2Ffi0R0XBZ1L5xyadjv6O9UY5bu1ij51I7HVNFl9wxwquAUIGBAFGgwyNzM1NzAxOTU0MzMiDMyrKtx%2FbKagKA8HGiqVBR%2FPei8m5kWAVB2X0nEDS5gp8EdxqcqrBLskmcQan6kHrsejKotuoe174dOd51ZpYrGX%2Fp2mMA7a0bAUetkMWYbJGx6GKK6lI4Id3oPdJlcMIkIfz1EzwTR6IitURBtHbfGmuSULSq7j7TIKEjF0gXsvRlqpmD6%2Fx6tgea1GlDur0AdaxsJpkBlvK0jXy3b5%2FAvlqIFT%2F3kL7W2N0Rk5BNoADSgEnAHJPCmFiinF8mCYW3Cp%2FBFZfYcFyNNcdWCdko0i6mAYDlqSN09nqXTpeiYgGH7NZgixaAuXcYvY0gZ2%2Fc5x02Vu7BIH5LdoXMhfAATm9MzlLfyTHF25DqXXDuoQe9Ex361M6obJh84c%2FDiHJCNTlLM17iNDg2Y%2BC2Ff4C4xXyN6qR49gTUk2tSsrRKtpEmikEyD7KF%2B3P8KNoKcRXpIAO%2B7kf6FpU8Ax6ezJoFBANOWAjwQuJ8yxXt7sJMkApCCaHpdj7Ss2T6oyR5S9KQP0ryOZVJ1R8JoWDN8Tlm67FqKqcAM7nd7AUmeAHcMtwHd%2FizNt7bnzljpE35dDs32f1hsM%2FigyoOAj6hRLsej61WaJySmYmsTHuu%2BytEVJw0TuFToLMvcoAYqKReMMroRmu1Dz6784BjEER65S1noS0W4NwczeKdhm1nAS6ubM%2BLjOi8SWw67NOWaMOUDUra3EpHOsi%2FLlwhbtJswh7TPJAEubpojAUcSBHU6ruGsZmBK9oJ%2F31kvp4z6iyV%2Fwlu85AS5%2BEV1KF0s1yuXz1b7JmgSlA4qk8ZwLQ9aKY%2B%2B981elKc8LvvwKnbJ0baOYXzcvnYVDdSKeOohDVd6w3hsGZoLJ3jy1saPjSzsjliuc5g3M%2FIMQ5DA2%2BsfDPkaxu%2B%2FQe8wspGXzwY6sQGbk%2BWiM5%2Ff%2B172cLYKeWgeM6VB%2BopX0%2Bbdhu74zBwjtEZ86%2BySIw1XhJWPicF2nUMkZK2afQj7sR3mBzEyXqFC6yAMmKmnyKg%2B9o64KuoXH6BIL6NJ2RIMx9kJ%2FRquyXLloQQAbr2idsvomYUXehzfAZORzrKFod4P5a2A55bi%2BlokZBOm1g%2BNAu%2BKqpWFjWmYXF6fw4Ww8KWCpnX3yWvW1GuOCp9o9zpMRaVTAL%2Fz%2F0A%3D&#038;X-Amz-Algorithm=AWS4-HMAC-SHA256&#038;X-Amz-Credential=ASIAT7MQN47UUQAL7HMR%2F20260420%2Feu-west-1%2Fs3%2Faws4_request&#038;X-Amz-Date=20260420T064420Z&#038;X-Amz-SignedHeaders=host&#038;X-Amz-Expires=900&#038;X-Amz-Signature=76ce3709eeedd8bd47ebbc9f3dc433554c6e4bc1ee2ba5002cf38bfc4840df19\" alt=\"\" width=\"50\" height=\"47\" \/><\/a>Style Names<\/h1>\n<p>Unlike HTML and CSS, JavaScript is CaseSENsitiVE<\/p>\n<p>The <a href=\"https:\/\/www.w3schools.com\/jsref\/dom_obj_style.asp\">w3schools link<\/a> contains a list of the Style Object Properties available.<\/p>\n<p>As a general rule:<\/p>\n<ul>\n<li>If a style attribute is a single word, then use the same name for JavaScript.<\/li>\n<li>If a style attribute contains hyphens, leave them out and start the next word with a capital letter (ie use camelCase)<\/li>\n<\/ul>\n<h1>Examples<\/h1>\n<pre class=\"brush: jscript; title: JavaScript; notranslate\" title=\"JavaScript\">\r\nelement.style.display=&quot;none&quot;;\r\n \r\nelement.style.color=&quot;orange&quot;;\r\n \r\nelement.style.width=&quot;150px&quot;;\r\n \r\nelement.style.backgroundColor = &quot;red&quot;; \r\n \r\nelement.style.borderLeft = &quot;thick solid #0000FF&quot;;\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once a function knows has a reference for an element, the style settings for that element can be modified. For Higher Computing Science, you need to be able to use JavaScript for: hiding page elements revealing page elements changing the position of an element changing the size of an element changing the colour of an element changing the look of text Style Names Unlike HTML and CSS, JavaScript is CaseSENsitiVE<\/p>\n<p><a class=\"more-link\" href=\"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/javascript\/changing-element-styles\/\">Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-307","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":7,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/307\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/307\/revisions\/315"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}