Skip to main content

  | मौसम…

411 समाचार
Public archive edition · Attributed source reporting with original dates · AI drafts are excluded

411 REFERENCE · Wikibooks

JavaScript/Changing element styles/Exercises

Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.

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. 100% function toggle() { "use strict"; // locate div_1 const div_1 = document.getElementById("div_1"); if (div_1.style.backgroundColor !== "aqua") { div_1.style.backgroundColor = "aqua"; } else { div_1.style.backgroundColor = "green"; } // locate the button const button = 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. 100% function toggle() { "use strict"; // locate div_1 const div_1 = document.getElementById("div_1"); // ask the user const tmp = prompt("What color do you prefer?"); // change the color (if possible) div_1.style.backgroundColor = tmp; }