자바스크립트로 폰트 변경 등의 효과를 넣어보자!
아래 사진 처럼말이다
|
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 값을 바꿔주는 식으로 진행한다~
반응형
그리드형
'javascript' 카테고리의 다른 글
| 자바스크립트 배열 (0) | 2017.08.22 |
|---|---|
| 자바스크립트 날짜, 유닉스 (0) | 2017.08.22 |
| 자바스크립트 이미지 슬라이드(javascript image slide) (0) | 2017.08.22 |
| 자바스크립트 구구단 출력해보기 (0) | 2017.08.22 |
| 자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경 (0) | 2017.08.21 |