[JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기

이번 포스팅에서는 자바스크립트로 배경색을 바꿔보는 방법에 대해 알아보도록 하겠습니다. document.bgColor 함수를 활용해 배경색을 지정해줄 수 있습니다. 예제를 보시면 바로 이해하실 수 있으실겁니다. 이 예제를 응용해 다양하게 활용해보세요. 예제는 라디오버튼에 Value값을 자바스크립트로 넘겨줘서 배경색을 바꾸는 방식입니다.


라디오버튼 클릭시 원하는 배경색으로 바꾸기 예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="EUC-KR">
<title>배경색 바꾸기</title>
<script language = "javascript">
function changeBg(color){
    document.bgColor = color;
}

</script>
</head>
<body>

    <input type = "radio" name="bgColor" value = "yellow" onclick="changeBg(this.value)">노란색<br>
    <input type = "radio" name="bgColor" value = "green" onclick="changeBg(this.value)">녹색<br>
    <input type = "radio" name="bgColor" value = "blue" onclick="changeBg(this.value)">파란색<br>
    <input type = "radio" name="bgColor" value = "red" onclick="changeBg(this.value)">빨간색<br>

</body>
</html>

실행결과

배경색 바꾸기


[JavaScript] 동적으로 테이블 만들기

[JavaScript] 방문할때마다 랜덤으로 변하는 이미지 구현하기

[JavaScript] Span태그의 속성(글꼴,색상,크기,스타일) 변경하기


댓글(0)

Designed by JB FACTORY