JavaScript/更改元素样式/练习

主题：CSS 样式

我们使用前一页的 HTML 页面作为练习。

---

1. 修改函数 toggle。

• 如果 'div_1' 的背景颜色为绿色，则将其更改为水绿色；否则，将其更改回绿色。
• 如果按钮的背景颜色为红色，则将其更改为黄色；否则，将其更改回红色。

单击以查看解决方案

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. 发挥创造力。修改函数 toggle，以便更改其他 CSS 属性，例如，div 的文本大小、body 的内边距或背景颜色，...

---

3. 修改函数 toggle。

• 询问用户 prompt() 他更喜欢哪个背景颜色作为第一个 div。
• 将第一个 div 的背景颜色更改为此颜色。

单击以查看解决方案

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;
}