Programming language/Javascript,jQuery

[Javascript]document.getElementById() - (2)

document.getElementById()를 사용하면 HTML 태그의 속성들을 변경해줄 수 있다.

간단하게 아래 코드를 통해 몇 개만 알아보면,

- 배경색 변경 : document.getElementById().style.backgroundColor="#색상";

- 디스플레이 유무 : document.getElementById().style.display="none(or block)";

- URL입력 : document.getElementById().src="url 입력";

보통 태그안에서 사용하는 style 속성의 font-weight라던지, background-color같이 '-'로 나누어져있는 부분은 이어 붙인 뒤 대문자 처리를 해준다.

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
<%@page language="java" contentType="text/html; charset=euc-kr"%>
<html>
<head>
<%@include file="/common/jsp/header.jsp"%>
<title></title>
<script>    
function OnChange(e)
{    
    var value = e;
    var rect = document.getElementById("rectangle");
    switch(value){
        case "color":
        {
            rect.style.backgroundColor="#ff0000";
        }
        break;    
        case "back":
        {
            rect.style.backgroundColor="";
        }
        break;    
        case "hide":
        {
            rect.style.display="none";
        }
        break;
        case "show":
        {
            rect.style.display="block";
        }
        break;
        case "link":
        {
            document.getElementById('urlname').src="http://shxrecord.tistory.com";
        }
        break;
    }
 
}
</script>
</head
<body>
<form name=f1 style=margin:0; onsubmit="return false;" >
    <div id="rectangle" style="width: 150px; height: 150px; border:2px solid red;">
    </div>
    <div>
      <input type="button" value="색 칠하기" onclick="OnChange('color');">
      <input type="button" value="원래대로" onclick="OnChange('back');">
      <input type="button" value="도형 나타내기" onclick="OnChange('show');">
      <input type="button" value="도형 숨기기" onclick="OnChange('hide');">    
      <input type="button" value="블로그" onclick="OnChange('link');">
    </div>
    <iframe id="urlname" src="" style="width: 450px; height: 450px;"></iframe>
</form>
</body>
</html>
Colored by Color Scripter
cs

<결과>

<색 칠하기>

<도형 숨기기>

<블로그>

+ 피드백은 언제나 환영입니다 :)

저작자표시 비영리 변경금지 (새창열림)

'Programming language > Javascript,jQuery' 카테고리의 다른 글

[Javascript]div modal창 만들기 (0)	2018.06.26
[Javascript]id값 가져오기 (1)	2018.06.25
[Javascript]document.getElementById() - (1) (2)	2018.06.21
[Javascript]SELECT(OPTION) 조작하기 (0)	2018.06.03
[IBSheet]CellValue와 GetSelectionRows() (2)	2018.05.10

Contents

새소식

[Javascript]document.getElementById() - (2)

'Programming language > Javascript,jQuery' 카테고리의 다른 글

연관 포스팅

티스토리툴바