javascriptで学ぼ！-cssをjavascriptで！

<div id="target"> </div>をターゲットにしてjavascriptでcssを利用していました。

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

次はdivをjavascriptで作ってcss追加して操作していきます。

let div = document.createElement('div');

これで"div"追加します。変数divに代入して以後これに機能を追加していきます。

これ(変数div)に、cssを適応していきます。

div.classList.add('box');

イベントを追加します。

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

クリックしたらclass "circle"を適用して四角は丸になります。

document.body.appendChild(div);	

最後に表示させるために、bodyに適応させます。

全体のコードです。

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

Element.classList - Web API | MDN