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>
cs


<결과>


<색 칠하기>



<도형 숨기기>



<블로그>



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

반응형
저작자표시 비영리 변경금지
Contents

연관 포스팅

댓글 0

포스팅 주소를 복사했습니다.

이 글이 도움이 되었다면 공감 부탁드립니다.

MENU

SHARE

티스토리툴바