Changing Element Styles

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

The w3schools link contains a list of the Style Object Properties available.

As a general rule:

  • If a style attribute is a single word, then use the same name for JavaScript.
  • If a style attribute contains hyphens, leave them out and start the next word with a capital letter (ie use camelCase)

Examples

JavaScript
1
2
3
4
5
6
7
8
9
element.style.display="none";
  
element.style.color="orange";
  
element.style.width="150px";
  
element.style.backgroundColor = "red";
  
element.style.borderLeft = "thick solid #0000FF";