글
리스트박스의 배경색으로 배경색바꾸기
안녕하세요?
오늘도 소스코드를 가지고 설명하겠습니다. 오늘은 리스트상자안에 색깔을 선택하면 그 색깔로 배경이 바뀌는 소스입니다.
<form>
<select Size=5 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="blue">blue
<option value="aquamarine">aquamarine
<option value="chocolate">chocolate
<option value="darkred">dark red
<option value="gold">gold
<option value="red">red
<option value="yellow">yellow
<option value="hotpink">hotpink
<option value="lime">lime
<option value="darkkhaki">dark khaki
<option value="cadetblue ">cadet blue
<option value="darkgoldenrod">dark goldenrod
<option value="darkslateblue">dark slate
<option value="blue">blue
<option value="deeppink">deep pink
<option value="darksalmon">dark salmon
<option value="salmon">salmon
<option value="tan">tan
<option value="wheat">wheat
<option value="tomato">tomato
<option value="springgreen">springgreen
<option value="turquoise">turquoise
<option value="white" selected>White
</select>
</form><!---->
<select> <option> 은 리스트 박스를 만드는 겁니다. value는 값을 얘기하구요. 이 value는 위에 onChange에 사용된 value값으로 사용됩니다. 중요한 것은 onChange인데요. 말그대로 선택사항이 바뀌면 뒤의 문장을 실행시켜라 하는겁니다. 뒤의 문장에 뭐냐면 document.bgColor=this.options[this.selectedIndex].value 이거지요. 도큐먼트의 bgColor즉 배경색을 option에 있는 걸로 selectedIndex 즉 선택된 값의 value즉 값으로 bgColor를 바꾸어라 하는 겁니다. 이해가 가실런지...쉽게 말해서 아래에 tomato가 선택이 되면 option value="tomato" 즉 값이 tomato이기 때문에 bgColor="tomato"가 되는 거지요. 실행은 직접 해보시기 바랍니다. 재미있는 소스인거 같습니다.
그럼 다음시간에 또 만나요~
'Java Script' 카테고리의 다른 글
history.go (0) | 2011.08.16 |
---|---|
버튼 눌리면 경고메세지 보여주기 (0) | 2011.08.13 |
마우스 오른쪽 버튼 사용금지 (3) | 2011.08.08 |
시간대별로 다른 인사 나타내기 (0) | 2011.08.04 |
Function 객체 (0) | 2011.08.01 |