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">
    #div1 {
        border: 1px solid black;
        width: 150px;
        height: 150px;
        background-color: yellow;        
    }
    
    #div2 {
        border: 1px solid black;
        width: 150px;
        height: 150px;
        background-color: yellow;        
    }
        
    #menu {
        width: 630px;
        height: 126px;
        margin: 0px auto;
        margin-top: -120px;
    }    
    
    #menu img {
        position: relative;
        left: 0px;
        top: 0px;
        cursor: pointer;
    }    
</style>
 
<script type="text/javascript">
    
 
    function test() {
        
        var div1 = document.getElementById("div1");
    
        //자바스크립트 -> CSS 제어
        //1. 태그명.style속성
        //2. CSS속성명을 그대로 사용
        //    - CSS속성명이 두단어로 구성되어 있으면 (background-color)
        //3. CSS 속성값은 문자열로 기입
        
         div1.style.width = "300px"; //Css] width: 300px
         div1.style.backgroundColor = "blue"; //Css] background-color: yellow;
                 
    }
    
    function test2() {
        
        var div2 = document.getElementById("div2");
        //alert(div2.style.visibility);
        
        //토글 버튼, Toggle Button        
        if (div2.style.visibility != "hidden") {
            div2.style.visibility = "hidden";
            event.srcElement.value ="보이기";
        } else {
            div2.style.visibility = "visible";
            event.srcElement.value ="감추기";
        }
    
    }
    
    //롤오버 이미지    
    function test3() {
        //event.srcElement.src = "images/catty05.png"; 
        event.srcElement.style.position = "relative";
        event.srcElement.style.left = "0px";
        event.srcElement.style.top = "10px";
    }
    
    function test4() {
        //event.srcElement.src = "images/catty01.png";
        event.srcElement.style.position = "relative";
        event.srcElement.style.left = "0px";
        event.srcElement.style.top = "0px";
    }
    
    function init() {
        //메뉴 이미지에 미리 이벤트 추가
        var menu = document.getElementById("menu");
        
        for (var i=0; menu.childNodes.length; i++) {
            menu.childNodes[i].onmouseover = function() {
                event.srcElement.style.top = "100px";
            }
            menu.childNodes[i].onmouseout = function() {
                event.srcElement.style.top = "0px";
            }
        }
    }
    
    
</script>
    
 
</head>
<body onload="init();">
 
 
    <!-- ex16.htm -->
 
 
 
    [ 버튼 찾아 CSS제어하기 ]<br />
    
    
    <div id="menu"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div>
    
    
    
    <hr />
    <img src="images/catty01.png" id="cat01" onmouseover="test3();" onmouseout="test4();" />
    
        
    
    <hr />
    <input type="button" value="테스트" onclick="test();" />
    <br /><br />
    <div id="div1">상자</div>
    
        
    <input type="button" value="감추기" onclick="test2();" />
    <br /><br />
    <div id="div2">상자</div>
 
</body>
</html>
cs


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

js test  (0) 2016.01.22
타이머  (0) 2016.01.22
마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22
태그 조작  (0) 2016.01.22
태그 검색  (0) 2016.01.22

+ Recent posts

티스토리툴바