Link
10-23 01:24
«   2020/10   »
        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
100
Total
1,082,117
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 보이기 감추기 기능, 클릭시 css 바꾸기 본문

javascript

자바스크립트 보이기 감추기 기능, 클릭시 css 바꾸기

이수진의 블로그 이수진의 블로그 2017. 8. 24. 08:46

자바스크립트로 폰트 변경 등의 효과를 넣어보자!

 

아래 사진 처럼말이다

 

 

 

 

 

 

 

 

 

 

 

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
 
    var zoom = function(demo){   //함수 호출  -> 인자값으로 아이디를 받는다.
        demo.style.color = 'red';
        demo.style.fontSize = '34pt';
 
    };
 
    window.onload = function () {
        var h = document.getElementById('hideBtn');
        var op = document.getElementById('openBtn');
        var pp = document.getElementById("message");
        
        
        
        h.onclick = function () {    //숨기는 버튼 클릭했을 때
            pp.style.display = 'none';
        }
 
        op.onclick = function () {  //보이기 버튼 클릭했을 때
            pp.style.display = 'block';
            pp.style.color = 'red';
            pp.style.fontSize = '20pt';
        }
    }
 
 
</script>
<body>
 
<div id="demo">오늘은 금요일 내일은 토요일 모레는 일요일 그다음은 월요일</div>
 
<button id="btn" onclick="zoom(document.getElementById('demo'))">확대하기</button>
 
<hr>
 
<p id="message">hellow</p>
 
<button id="hideBtn">감추기</button>
<button id="openBtn">보이기</button>
 
</body>
</html>
cs

 

 

 

 

 

소스는 위와 같다.

자바스크립트 함수를 호출하거나, DOM객체를 생성해서 이벤트를 건다. 그리고 CSS 값을 바꿔주는 식으로 진행한다~

0 Comments
댓글쓰기 폼