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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>    
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<style type="text/css">
    #box {
        border: 1px solid black;
        width: 150px;
        height: 150px;
        position: absolute;
        /* left: 100px; */
        /* top: 0px; */
        background-color: yellow;
    }
        
    
    .box {
        border: 1px solid black;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0px;
        top: 100px;
    }
    #box1 { background-color: red; }
    #box2 { background-color: yellow; }
    #box3 { background-color: blue; }
    #box4 { background-color: orange; }
    #box5 { background-color: purple; }    
</style>
 
 
<script type="text/javascript">
 
    var box;
    var boxlist = new Array();
    var index = 0; //박스들을 접근하기 위한 인덱스
    var z = 1;//z-index 값으로 사용(마지막 누른 사각형을 위로 올리기위한.,)
    
    function init() {
        //추후에 사용할 객체들을 페이지 로드에서 미리 찾아서 전역변수에 할당
        box = document.getElementById("box");
        //boxList[0] = document.getElementById("box1"); 5개 다 쓰지말고 for문으로..
        for (var i=0; i<5; i++) {
            boxList[i] = document.getElementById("box" + (i + 1));
        }
    
        
        //동적으로 이벤트 추가
        document.onmousedown = function() {
            var x = event.clientX;
            var y = event.clientY;
            
            //alert(x); //숫자만
            //이걸 이용해서... 상자를 클릭한 위치로 이동시키기
            //box.style.left = (x - 75) + "px";
            //box.style.top = (y - 75) + "px";
            
            boxList[index].style.zIndex = z;
            z++;
            
            
            boxList[index].style.left = (x - 50) + "px";
            boxList[index].style.top = (y - 50) + "px";
            index++;
            if (index >= 5) { index = 0; }
            
            
        };
        
        
        
    }
 
    function test() {
        //box.style.left = "300px";
        //box.style.top = "200px";
        
        //ask] 현재 위치에서 우로 20px 아래로 20px 이동하시오.
        
        // ******* Javascript로 CSS값을 읽어오는 경우.,
        //1. 인라인스타일로 적용
        //2. 자바스크립트로 초기화를 하고 읽기.,
        
        // *** (Embeded, External 방식으로) CSS에서 적용한 속성값을 Javascript로 읽는 경우.,
        //    -> 값을 읽을 수 없음
        //alert(box.style.left);
        //alert(box.style.left + 20);
        
        // *** Javascript에서 적용한 속성값을 Javascript로 읽는 경우.,
        //    -> 값이 읽혀짐
        //box.style.left="200px";
        //alert(box.style.left);
        //box.style.left = box.style.left + 20;
        
        // *** (inline 방식으로) CSS에서 적용한 속성값을 Javascript로 읽는 경우.,
        //    -> 값이 읽혀짐
        //alert(box.style.left); //x, 100px -> 100
        //alert(box.style.left + 20); //x, 100px20
        //alert(parseInt(box.style.left) + 20;);
        box.style.left = parseInt(box.style.left) + 20 + "px"; //o
        //box.style.top += 20; //x
        box.style.top = parseInt(box.style.top) + 20 + "px"; //o
    }
 
</script>
 
</head>
<body onload="init();">
 
 
    <!--  ex18.htm -->
 
 
    
    <input type="button" value="테스트" onclick="test();" />
    
    <div id="box" style="left:100px; top:0px;">상자</div>
    
    
    <div id="box1" class="box">상자</div>
    <div id="box2" class="box">상자</div>
    <div id="box3" class="box">상자</div>
    <div id="box4" class="box">상자</div>
    <div id="box5" class="box">상자</div>
    
    
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

form test  (0) 2016.01.22
회원정보 입력하기  (0) 2016.01.22
타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22
마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22

+ Recent posts

티스토리툴바