More than 5 years have passed since last update.

クリックを押すタイミング毎にclassをつけたり消したりする

JavaScript

Last updated at 2019-06-06Posted at 2019-05-05

JavaScriptについて学び

本日端午の節句。Qiitaを始めてみました。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript Click Event</title>
</head>
<body>
  <div class="wrapper">
    <div id="target" class="parallelogram">
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

main.js

<script>
'use strict';

const target = document.getElementById('target');
// document.getElementById('target')を定数（const）にtargetとして代入

target.addEventListener('click', function() {
  target.classList.toggle('circle');

});

</script>

style.css

.wrapper {
      padding-top: 600px;
      position: relative;
    }

    .parallelogram {

      width: 100px;
      height: 100px;
      background: #43676b;
      /* 御召茶 */
      cursor: pointer;
      transition: 0.8s;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) skew(20deg);
    }


    .circle {
      border-radius: 50%;
      background: #aa4c8f;
      /* 梅紫 */
      transform: translate(-50%, -50%) rotate(360deg);
    }

クリックするたびにtoggleで平行四辺形を正円に変化。
ちなみに平行四辺形は御召茶、正円は梅紫という色の名前です。
和色大辞典さん、いつもありがとうございます。https://t.co/UIXHwL8hG5 pic.twitter.com/30RQPZEz1B
— Herb Collage (@herbcollage) 2019年5月5日

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up