JavaScript/Changing element styles/Exercises

Topic: CSS style

We use the HTML page of the previous page for the exercises.

---

1. Modify the function toggle.

• If the background color of 'div_1' is green, change it to aqua; else, change it back to green.
• If the background color of the button is red, change it to yellow; else, change it back to red.

Click to see solution

functiontoggle(){"use strict";// locate div_1constdiv_1=document.getElementById("div_1");if(div_1.style.backgroundColor!=="aqua"){div_1.style.backgroundColor="aqua";}else{div_1.style.backgroundColor="green";}// locate the buttonconstbutton=document.getElementById("buttonToggle");if(button.style.backgroundColor!=="red"){button.style.backgroundColor="red";}else{button.style.backgroundColor="yellow";}}

---

2. Be creative. Modify the function toggle so that other CSS properties change, e.g., div's text size, body's padding or background color, ... .

---

3. Modify the function toggle.

• Ask the user prompt() which background color he prefers for the first div.
• Change the background color of the first div to this color.

Click to see solution

functiontoggle(){"use strict";// locate div_1constdiv_1=document.getElementById("div_1");// ask the userconsttmp=prompt("What color do you prefer?");// change the color (if possible)div_1.style.backgroundColor=tmp;}