Setting Style

To set the style of an element in JavaScript, use the style property, followed by the style name. Example of setting the background color of a button: 
myButton.style.backgroundColor = `yellow`
In the example above, note that the style name in CSS is background-color, but dashes are not allowed in JavaScript property names, so camel case is used instead.

Exercise 1 of 6

Change the button's background color when clicked. Use the background-color style.

HTML

<button id="backgroundColorButton">Change my background color</button>

JavaScript

let backgroundColorButton = document.getElementById(`backgroundColorButton`)

backgroundColorButton.addEventListener(`click`, changeBackgroundColor)

function changeBackgroundColor() {
  // your code will appear here
}

Your code

Test your code

Exercise 2 of 6

Change the paragraph's background color when the button is clicked.

HTML

<button id="paragraphBackgroundColorButton">Change background color</button>
<p id="backgroundColorParagraph">Change my background color</p>

JavaScript

let paragraphBackgroundColorButton = document.getElementById(`paragraphBackgroundColorButton`)
let backgroundColorParagraph = document.getElementById(`backgroundColorParagraph`)

paragraphBackgroundColorButton.addEventListener(`click`, changeParagraphBackgroundColor)

function changeParagraphBackgroundColor() {
  // your code will appear here
}

Your code

Test your code

Change my background color

Exercise 3 of 6

Change the paragraph's text color when the button is clicked. Use the color style.

HTML

<button id="colorButton">Change text color</button>
<p id="colorParagraph">Change my text color</p>

JavaScript

let colorButton = document.getElementById(`colorButton`)
let colorParagraph = document.getElementById(`colorParagraph`)

colorButton.addEventListener(`click`, changeTextColor)

function changeTextColor() {
  // your code will appear here
}

Your code

Test your code

Change my text color

Exercise 4 of 6

Change the box's text color when the button is clicked.

HTML

<button id="boxColorButton">Change text color</button>
<div id="colorBox">Change my text color</div>

JavaScript

let boxColorButton = document.getElementById(`boxColorButton`)
let colorBox = document.getElementById(`colorBox`)

boxColorButton.addEventListener(`click`, changeBoxTextColor)

function changeBoxTextColor() {
  // your code will appear here
}

Your code

Test your code

Change my text color

Exercise 5 of 6

Change the paragraph's font size when the button is clicked. Use the font-size style.

HTML

<button id="fontSizeButton">Change font size</button>
<p id="fontSizeParagraph">Change my font size</p>

JavaScript

let fontSizeButton = document.getElementById(`fontSizeButton`)
let fontSizeParagraph = document.getElementById(`fontSizeParagraph`)

fontSizeButton.addEventListener(`click`, changeFontSize)

function changeFontSize() {
  // your code will appear here
}

Your code

Test your code

Change my font size

Exercise 6 of 6

Change the box's font size when the button is clicked.

HTML

<button id="boxFontSizeButton">Change font size</button>
<div id="fontSizeBox">Change my font size</div>

JavaScript

let boxFontSizeButton = document.getElementById(`boxFontSizeButton`)
let fontSizeBox = document.getElementById(`fontSizeBox`)

boxFontSizeButton.addEventListener(`click`, changeBoxFontSize)

function changeBoxFontSize() {
  // your code will appear here
}

Your code

Test your code

Change my font size
Last section Next section