<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>배경색의 변경</h1>
※다음 버튼을 클릭하면 홈페이지의 배경색을 변경할 수 있습니다.<BR>
<br>
// 버튼 자체에서 색상변경하기. (색상은 RBG 로 넣어서 사용)
<button onclick="document.bgColor='#ff0000'">빨강</button>
<button onclick="document.bgColor='#ff0000'">파란</button>
<button onclick="document.bgColor='#ff0000'">보라</button>
<button onclick="document.bgColor='#ff0000'">초록</button>
<button onclick="document.bgColor='#ff0000'">검정</button>
// java script 사용하여 변경하기.
<button onclick="myColor(1)">노랑</button>
<script type="text/javascript">
function myColor(n) {
if(n == 1){
document.bgColor='#ffff00';
}else if(n == 2){
}
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------
java Script로 사용 하여 색상변경하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>배경색의 변경</h1>
<p>%다음 버튼을 클릭하면 홈페이지의 배경색을 변경할 수 있습니다.</p>
<form name="f1">
<input type="button" onclick="myfunc(1)" value="빨강">
<input type="button" onclick="myfunc(2)" value="녹색">
<input type="button" onclick="myfunc(3)" value="청색">
<input type="button" onclick="myfunc(4)" value="주황색">
<input type="button" onclick="myfunc(5)" value="검정색">
<input type="button" onclick="myfunc(6)" value="흰색">
</form>
<script type="text/javascript">
function myfunc(n) {
if(n==1){
document.body.style.backgroundColor = "red";
}else if(n==2){
document.body.style.backgroundColor = "green";
}else if(n==3){
document.body.style.backgroundColor = "blue";
}else if(n==4){
document.body.style.backgroundColor = "orange";
}else if(n==5){
document.body.style.backgroundColor = "black";
}else if(n==6){
document.body.style.backgroundColor = "white";
}
}
</script>
</body>
</html>
