スタイル操作 解答例

練習問題4-1


let element = document.getElementById("myElement");
element.style.backgroundColor = "red";

練習問題4-2


let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.fontSize = "20px";
}

練習問題4-3


let element = document.getElementById("myElement");
element.style.width = "200px";
element.style.height = "100px";

練習問題4-4


let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = "blue";
}

練習問題4-5


let element = document.getElementById("myElement");
element.style.display = "none";

練習問題4-6


let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  let randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  elements[i].style.backgroundColor = randomColor;
}

練習問題4-7


let element = document.getElementById("myElement");
element.style.borderTop = "1px solid black";

練習問題4-8


let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.margin = "20px 10px";
}

練習問題4-9


let element = document.getElementById("myElement");
element.style.fontWeight = "bold";

練習問題4-10


let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.opacity = "0.5";
}
構文
標準メソッド
セレクタ
スタイル操作