javascriptで学ぼ！-cssを操作しよう！

donguri

ドットインストールでやってみました！

はじめてのJavaScript (全11回)を参考にします。

HTML の基本です。

<!doctype html>
<html lang="ja">
<head>
	
<meta charset="UTF-8" />
<title>Document</title>
<style>

//スタイルを書きます

</style>
</head>
<body>
	
//　HTMLタグをきていきます。

<div id="target">　</div>	

<script>

//script(javascript)を書きます。

</script>
</body>
</html>

スタイルを決めていきます。

<style>	
			
	body{			
	display: flex;
	flex-wrap: wrap;
	}
			
	.box{
	width: 100px;
	margin: 6px;
	height: 100px;
	background: skyblue;
	cursor: pointer;
	transition: 1s;	
	}
			
　　　　　.circle{
	background: pink;
	border-radius: 50%;
	transform: rotate(360deg);
	}
			
</style>

とします。そして、javascriptでスタイル、cssを読み込んで表示させます。

まず、idを取得することで表示させてみます。

<div id="target">　</div>

id="target"を使います。

<script>
'use strict';
　let target = document.getElementById("target");
　target.classList.add("box");
　target.addEventListener("click", 
　　function(){
　　　target.classList.toggle("circle");
　　});
</script>
'use strict';

としてウェブブラウザーに厳密 (strict) に解釈させます。

let target = document.getElementById("target");　で変数にいれてやり、

target.classList.add("box");  でclass"box"を適用します。

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

で"click"した時の動作を規定してやります。

target.classList.toggle("circle"); でクリックした時にはcss "circle"を適用します。

toggleすることでクリックするたびに四角、丸とアニメーションします。


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