四角を表示する

左上「HTML」の入力欄に、以下の通りHTMLを入力すると、画面に四角が表示されます。

<div style="width:200px; height:200px; background:#0099cc;"></div>

DIVタグは、HTMLでは、ある範囲を囲んでまとまりとするために使い、絵を描くためのタグではないのですが、簡単に四角の範囲を描くことができるので、そういった用途に使うこともできます。

ボタンを描いたときと同じようにIDを付与して、JavaScriptで操作することができます。

「HTML」を、以下のようにして、

<div id="xyz123" style="width:100px; height:100px; background:#0099cc;"></div>

左下のJavaScriptの入力欄に、以下のようにプログラムを書くと、画面に描いた四角に関連する処理を追加することができます。。

document.getElementById('xyz123').addEventListener('mouseover', function(){
	document.getElementById('xyz123').innerHTML = '乗った！';
	document.getElementById('xyz123').style.background = '#cc9900';
});
document.getElementById('xyz123').addEventListener('mouseout', function(){
	document.getElementById('xyz123').innerHTML = '離れた！';
	document.getElementById('xyz123').style.background = '#0099cc';
});