Link
12-03 07:17
«   2020/12   »
    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    
Archives
Today
391
Total
1,187,542
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경 본문

javascript

자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경

이수진의 블로그 이수진의 블로그 2017. 8. 21. 08:56









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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        #topMenu ul{
            overflow: hidden;
        }
        
        #topMenu li{
            width: 200px;
            height: 40px;
            border: 1px solid red;
            float: left;
            background-color: gray;
        }
        
        
    </style>
    
    <script>
 
        var menuStr = ['HOME','GALLERY','PROFILE','GUEST','BOARD'];//배열
        window.onload = function(){
            var topMenu = document.getElementById('topMenu');  //탑메뉴 객체생성
            var ul = document.createElement("ul");
            //ul 객체 생성
            topMenu.appendChild(ul);
            //부모에 추가
            var tmpli = null;
            for(var i = 0 ; i < menuStr.length ; i++){
                li = document.createElement("li");
                //li 객체를 생성
                li.innerText = menuStr[i];
                li.style.listStyle = "none";
                li.style.textAlign = "center";
                li.style.lineHeight = "40px";
                
                ul.appendChild(li);
                //ul에 추가.
                
            }
            
            var ulview = ul.getElementsByTagName("li");
            
            for(var i = 0 ; i < ulview.length ; i++){
                ulview[i].onmouseover = function(){
                    if(this != tmpli){
                        this.style.backgroundColor = "yellow";
                    }
                    
                }
                
                ulview[i].onmouseout = function(){
                    
                    if(this != tmpli){   //tmpli 가 없으면 저 색깔로 변하고
                        this.style.backgroundColor = "gray";
                    }
                }
                
                ulview[i].onclick = function(){
                    if(tmpli != null){      //null이 아니면 tmp가 담아둔걸 gray로 다시 바꾸고
                        tmpli.style.background = "gray";
                        this.style.backgroundColor = "red";  //현재값을 red로 하고
                        tmpli = this;  //tmp 초기화
                    }
                    else{
                        this.style.backgroundColor = "red";
                        tmpli = this;  //클릭했을때 해당 객체를 넣는다.
                    }
                    
                }
            }
 
            
            //li태그 자동으로 추가하고
            //마우스 올라갈 때 배경색 바뀜
        };
    </script>
    
</head>
<body>
   
   <div id = "page">
       
       <div id="header">
           
           <h1>메뉴바 테스트</h1>
           <div id="topMenu">
               
           </div>
       </div>
       
   </div>
    
</body>
</html>
Colored by Color Scripter


0 Comments
댓글쓰기 폼