見出し画像

【ワンピースで覚えるJavaScript】第２９回 スタイルの操作(プログラミング入門講座)

エンジニアの休日

JavaScriptを利用して、スタイルの操作をしていきます。

classListがとっても便利ですね！！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" media="screen" href="style.css">
  </head>
  <body>
    <h1>スタイルの変更</h1>
    <button id="btn" class="btn btn-info mb-3">背景色を追加</button>
    <button id="reset" class="btn btn-danger mb-3">リセット</button>
    <ul id="list">
      <li><img src="img/luffy.png"></li>
    </ul>
    <h1>スタイルクラスの設定/除外</h1>
    <button id="btn2" class="btn btn-info mb-3">切り替え(toggle)</button>
    <button id="btn3" class="btn btn-info mb-3">追加(add)</button>
    <button id="btn4" class="btn btn-info mb-3">削除(remove)</button>
    <button id="btn5" class="btn btn-info mb-3">置き換え(replace)</button>
    <ul id="list2">
      <li><img src="img/nami.png"></li>
    </ul>
    <script src="index.js"></script>
  </body>
</html>
let btn = document.getElementById("btn");
let reset = document.getElementById("reset");
let list = document.getElementById("list");
//ルフィを取得
let luffy = list.firstElementChild;

btn.addEventListener(
  "click",
  change_backgound_color
);

reset.addEventListener(
    "click",
    reset_backgound_color
);

function change_backgound_color(){
  //styleプロパティを利用する
  luffy.style.backgroundColor = "red";
}

function reset_backgound_color() {
  //スタイルプロパティの初期化 null
  luffy.style.backgroundColor = null;
}

let btn2 = document.getElementById("btn2");
let btn3 = document.getElementById("btn3");
let btn4 = document.getElementById("btn4");
let btn5 = document.getElementById("btn5");
let list2 = document.getElementById("list2");
//ナミを取得
let nami = list2.firstElementChild;

btn2.addEventListener(
  "click",
  toggle_pink_class
);

function toggle_pink_class() {
  //classListプロパティ
  //toggleはクラスのオンオフを切り替え
  nami.classList.toggle("pink");
}

//classNameプロパティ (上書き)
// nami.className = "pink"

btn3.addEventListener(
  "click",
  () => { //add クラスを追加
    nami.classList.add("blue");
  }
);

btn4.addEventListener(
  "click",
    () => { //add クラスを削除
    nami.classList.remove("blue");
  }
);

btn5.addEventListener(
  "click",
    () => { //replace(old, new) 置き換える
    nami.classList.replace("pink", "blue");
  }
);
.pink {
    background-color: pink;
}

.blue {
    background-color: blue;
}

この記事が気に入ったらサポートをしてみませんか？