[ Java Script ] 마우스 이벤트 활용하여 색 변경 하기

2022. 2. 21. 20:39Java Script

 

 

 


 

< 코드 >

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마우스 이벤트</title>
<style type="text/css">
#box {
	width: 100px;
	height: 100px;
	background-color: #B7A4EE;
	cursor: pointer;
}
</style>
<script type="text/javascript">
	function f1(obj) {
		obj.style.backgroundColor = '#FF88A7';
	}
	function f2(obj) {
		obj.style.backgroundColor = '#FFB182';
	}
	function f3(obj) {
		obj.style.backgroundColor = "#FA8282";
	}
</script>
</head>
<body>

	<div id="box" onmouseover="f1(this)" onmouseout="f2(this)"
		onclick="f3(this)"></div>


</body>
</html>