1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>배경색의 변경</h1> <p>※다음 버튼을 클릭하면 홈페이지의 배경색을 변경할 수 있습니다.</p> <button type="button" onclick="changeColor('red')">빨강</button> <button type="button" onclick="changeColor('green')">녹색</button> <button type="button" onclick="changeColor('blue')">청색</button> <button type="button" onclick="changeColor('orange')">주황색</button> <button type="button" onclick="changeColor('black')">검정색</button> <button type="button" onclick="changeColor('white')">흰색</button> <script type="text/javascript"> function changeColor(color) { if(color =="red") document.bgColor="red"; if(color =="green") document.bgColor="green"; if(color =="blue") document.bgColor="blue"; if(color =="orange") document.bgColor="orange"; if(color =="black") document.bgColor="black"; if(color =="white") document.bgColor="white"; } </script> </body> </html> | cs |
'IT Study > Web' 카테고리의 다른 글
[JavaScript] 응용 예제 - string (0) | 2018.08.06 |
---|---|
[JavaScript] 응용 예제 - 생일 D-day (0) | 2018.08.06 |
[JavaScript] setInterval 응용 예제 (0) | 2018.08.06 |
[JavaScript] location 관련 함수 - back(), reload(), forward() (0) | 2018.08.06 |
[JavaScript] location.href 기본 예제 (0) | 2018.08.06 |