기록 ＞ 기억
[JavaScript] 폼 객체 ② radio 객체 본문
radio 객체
예제 ①
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_radio</title>
</head>
<body>
<form name="frm" method="post">
<textarea name="ta" rows="7" cols="35"></textarea><br>
<label><input type="radio" value="#000" name="chk">검정</label>
<label><input type="radio" value="#00f" name="chk">파랑</label>
<label><input type="radio" value="#0f0" name="chk">초록</label>
<label><input type="radio" value="#f00" name="chk">빨강</label><br>
<label><input type="radio" value="#ff0" name="chk">노랑</label>
<label><input type="radio" value="#fff" name="chk">흰색</label>
<label><input type="radio" value="#f90" name="chk">오렌지</label>
<input type="button" value="배경색" onclick="setBackColor(this.form)">
</form>
<script>
//매개변수 obj는 form 객체
function setBackColor(obj) {
//radio 객체는 name이 같아야하고 배열형태임
for(let i in obj.chk) {
if(obj.chk[i].checked) { //radio 선택여부 확인
obj.ta.value = obj.chk[i].value;
obj.ta.style.backgroundColor = obj.chk[i].value;
obj.ta.style.color = "#fff";
break;
}
} //for end
}
</script>
</body>
</html>
● 자바스크립트에서도 스타일 지정 가능
obj.ta.style.backgrondColor → form 안에 textarea 의 배경색 지정
css 에서는 background-color
javascript 에서는 backgoundColor ( - 없애고 카멜 표기법으로 표시)
'IT국비지원' 카테고리의 다른 글
| [JavaScript] 이벤트 (0) | 2021.09.29 |
|---|---|
| [JavaScript] 폼 객체 ④ select 객체 (0) | 2021.09.29 |
| [JavaScript] 폼 객체 ③ checkbox 객체 (0) | 2021.09.29 |
| [JavaScript] 폼 객체 ① text 객체 (0) | 2021.09.17 |
| [JavaScript] 폼 객체, 내장 객체, 윈도우 객체 (0) | 2021.09.17 |
| [Algorithm] 정렬 알고리즘 (0) | 2021.09.17 |
| [JavaScript] 함수 (function) (0) | 2021.09.15 |
'IT국비지원' Related Articles
more
Comments