본문 바로가기
IT/Html + CSS + JS

[Html+JavaScript] 버튼 클릭 시 홈페이지 배경색 변경

by AngieLee 2021. 6. 7.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>배경 화면의 설정</h1>
※다음 버튼을 클릭하면 홈페이지의 배경색을 변경할 수 있습니다.<br>

<button type="button" onclick="document.bgColor='red'">빨강</button>

<!-- js 사용 -->
<button type="button" onclick="colorset(1)">녹색</button>
<button type="button" onclick="colorset(2)">청색</button>
<button type="button" onclick="colorset(3)">주황색</button>
<button type="button" onclick="colorset(4)">검정색</button>
<button type="button" onclick="colorset(5)">흰색</button>

<script type="text/javascript">
function colorset( num ) {
	
	if(num == 1){
		document.bgColor = "green";
	}
	if(num == 2){
		document.bgColor = "blue";
	}
	if(num == 3){
		document.bgColor = "orange";
	}
	if(num == 4){
		document.bgColor = "black";
	}
	if(num == 5){
		document.bgColor = "white";
	}
	
	
}
</script>

</body>
</html>

실행결과

'IT > Html + CSS + JS' 카테고리의 다른 글

[Html+JavaScript] 미술관 및 박물관 링크  (0) 2021.06.07
[Html+JavaScript] "1일 1개씩 먹으면 의사 필요없다"  (0) 2021.06.07
[Html+JavaScript] 계산기  (0) 2021.06.07
[Html] List  (0) 2021.06.03
[Html] Tag -1 글자태그  (1) 2021.06.03