はてなブログで、CSSとJavascriptを使ってみる。

JavascriptとCSSが使えることを確認する

動作：

　・青い四角をクリックするとピンクの丸になる。

　・ピンクの丸をクリックすると青い四角に戻る。

はてなブログでは、JavascriptとCSSを使うことができるとのことなので、

はてなブログのHTML編集の欄に書いても、動作することを確認する。

今回のプログラム：

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Practice_1</title>

<style>
  .box{
    width: 120px;
    height: 120px;
    background:skyblue;
    cursor: pointer;
    transition:0.8s;
  }
  .circle{
    background :pink;
    border-radius:50%;
    transform: rotate(360deg);
  }
</style>

  </head>

  <body>
<div id="target" class="box"></div>

<script type="text/javascript">
    'use strict';
	//getElementByIdは、 指定したidの要素を取得
	//EventListener何かが起きたら、何かを追加する。
	
  	document.getElementById('target').addEventListener('click',function(){
    // document.getElementById('target').style.background = 'pink';
    // document.getElementById('target').style.borderRadius = '50%';
    
    document.getElementById('target').classList.toggle('circle');
    
    console('function');
  });
</script>

  </body>
</html>