리스트박스의 배경색으로 배경색바꾸기

Java Script 2011. 8. 10. 20:30


  안녕하세요?
  오늘도 소스코드를 가지고 설명하겠습니다. 오늘은 리스트상자안에 색깔을 선택하면 그 색깔로 배경이 바뀌는 소스입니다.

<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


설정

트랙백

댓글