자바 스크립트로 레이어 속성 다루기
자바 스크립트로 스타일 시트의 속성을 다루는 방법에 대해서는 이미 8장에서 설명한 바 있다. 이 방법을 통해서 우리는 스타일 시트로 정의된 레이어의 여러가지 속성을 다루어 보고자 한다. 그러기 위해서는 먼저 CSS의 속성에 대응되는 JSS속성을 알아야한다.
margin 관련 속성
CSS속성 JSS속성
margin-top marginTop
margin-right marginRight
margin-bottom marginBottom
margin-left marginLeft
margin margin
padding 관련 속성
CSS속성 JSS속성
padding-top paddingTop
padding-right paddingRight
padding-bottom paddingBottom
padding-left paddingLeft
padding padding
border 관련 속성
CSS속성 JSS속성
border-top-style borderTopStyle
border-right-style borderRightStyle
border-bottom-style borderBottomStyle
border-left-style borderLeftStyle
border-style borderStyle
border-top-width borderTopWidth
border-right-width borderRightWidth
border-bottom-width borderBottomWidth
border-left-width borderLeftWidth
border-width borderWidth
border-top-color borderTopColor
border-right-color borderRightColor
border-bottom-color borderBottomColor
border-left-color borderLeftColor
border-color borderColor
border-top borderTop
border-right borderRight
border-bottom borderBottom
border-left borderLeft
border border
레이어 관련 속성
width width
height height
top top
right right
bottom bottom
left left
z-index zindex
overflow overflow
clip clip
visibility visibility'
자바스크립트로 레이어에 접근하기 위해서는 Explorer의 all속성아나 getElementById메서드를 사용한다. all속성은 Explorer에서만 지원되지만 getElementById는 Explorer와 Netscape 5이상에서 동시에 지원하기 때문에 두 브라우저에서 호환되는 기능을 구현하려면 getElementById메서드를 사용하여야 한다. 두 방법을 사용하여 레이어의 스타일에 접근하는 방법은 다음과 같다.
syntax[신텍스] 구문론[법],통사론[법],문장론[morphology[형태]]
example) document.all["레이어의 아이디"].style.속성
document.getElementById("레이어의 아이디").style.속성
다음은 위의 방법을 사용하여 레이어의 속성을 자바 스크립트로 변경하는 example이다. 이 example는 두 개의 leyer를 정의하고 첫 번째 leyer에 마우스가 위차하면 자신의 속성을 바꿀뿐 아니라 다른 leyer의 속성도 변경하도록 한 example이다
Sample) example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tag All System </TITLE>
<meta http-equiv="Content-type" Content="text/html;charset=euc-kr">
<style type="text/css">
<!--
DIV{width:200px;height:100px;background-color:#BOEOFF;}
//-->
</style>
<script type="text/javascript">
<!--
document.title=" :: DIV javascirpt로 leyer,div 다루기";
document.oncontextmenu = new Function("return false");
document.onselectstart = new Function("return false");
document.ondragstart = new Function("return false");
function change(obj)
{
obj.style.border = "solid 1px red";
obj.style.backgroundColor = "#FFE0B0";
document.getElementById("lay2").style.visibility = "visible";
}
function unchange(obj)
{
obj.style.border = "none";
obj.style.backgroundColor ="#B0E0FF";
document.getElementById("lay2").style.visibility = "hidden";
}
//-->
</script>
</HEAD>
<BODY>
<h2>자바 스크립트 레이어 다루기</h2>
<Div ID="lay1" onMouseOver="change(this)" onMouseOut="unchange(this)">
레이어 1 입니다.
</Div>
<DIV ID="lay2" style="visibility:hidden;">
레이어 2 입니다.
</DIV>
</BODY>
</HTML>
Browser에 독립적인 layer.DIV 만들기
지금까지 우리는 Netscape 5이전의 Browser에서 Layer객체를 통하여 layer를 다루는 method과 Explorer와 Netscape 5이상의 browser에서 style sheets를 통해서 leyer 접근하는 method를 살펴보았다. but 실제로 우리가 만든 web text를 보는 user가 어떤 browser를 사용할지는 알수 없다. so user의 browser에 관계없이 동일한 화면을 output하도록 하려면 browser를 구분하여 그에 따라 layer와 관련된 속성들을 사용해야 한다.
먼저 browser를 구분하는 method을 보자. netscape 5 before에서는 layer Array을 backup[support]하고 Explorer와 netscape 5 after에서는 getElementById를 support하므로 next의 text을 통해서 user의 browser kind of 따라서 nn아나 ie변수에 값이 지정된다.
nn = (document.layers) ? 1: 0;
ie = (document.getElementById) ? 1: 0;
and browser의 kind of 에 따라 nn이 1 인 경우에는 layer 객체를 변수에 지정하고 ie가 1인 경우에는 layer의 style을 변수에 지정한다.
if(nn) 변수 = document.layers["레이어 아이디"]
if(ie) 변수 = document.getElementById("레이어 아이디").style
next 의 example은 next to before 에서 descripsion한 method을 이용하여 browserf를 구분하고 layer와 관련된 속성을 ex나 nets의 version에 관계없이 동일한 기능을 수행하도록 만들어진것이다. 주석을 참고하여 실행해 보기 바란다.
Sample Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tag All System Technique </TITLE>
<meta http-equiv="Content-type" Content="text/html;charset=euc-kr">
<style type="text/css">
<!--
//-->
</style>
<script type="text/javascript">
<!--
document.title=" :: DIV javascirpt로 leyer,div 다루기";
document.oncontextmenu = new Function("return false");
document.onselectstart = new Function("return false");
document.ondragstart = new Function("return false");
// Netscape 5 version before인 경우
nn = (document.layers) ? 1: 0;
// Explorer or Netscape 5 after인 경우
ie = (document.getElementById) ? 1: 0;
function init()
{
//netscape 5 before 인 경우 layer를 변수에 지정
if(nn) layer1 = document.layers["div1"]
//explorer or netscape 5 after 인 경우
//layer의 style을 변수에 지정
if(ie) layer1 = document.getElementById("div1").style
}
function move_left_right(val)
{
//좌표값을 숫자로 변환
var temp = parseInt(layer1.left);
layer1.left = temp+ val;
alert(layer1.left);
}
//layer를 세로 방향으로 이동하는 함수
function move_up_down(val)
{
var temp = parseInt(layer1.top)
layer1.top = temp + val;
}
//layer를 절대좌표로 이동하는 함수
function move_layer(x,y)
{
layer1.left = x;
layer1.top = y;
}
//layer를 보이는 함수
function show_layer()
{
//netscape 5 before인 경우 visibility = show
//아니면 visible
layer1.visibility =(nn)? "show":"visible";
}
//layer를 감추는 함수
function hide_layer()
{
//netscape 5 before인 경우 visibility = hide
//아니면 hidden
layer1.visibility =(nn)? "hide":"hidden";
}
//-->
</script>
</HEAD>
<BODY onload="init();">
<Form>
<input type="button" value="Left" onClick="move_left_right(-20)">
<input type="button" value="Right" onClick="move_left_right(20)">
<input type="button" value="UP" onClick="move_up_down(-20)">
<input type="button" value="Down" onClick="move_up_down(20)">
<input type="button" value="절대좌표 : 100, 100" onClick="move_layer(100,100)">
<input type="button" value="절대좌표 : 300, 200" onClick="move_layer(300,200)">
<input type="button" value="Show" onClick="show_layer()">
<input type="button" value="Hidden" onClick="hide_layer()">
</Form>
<Div ID="div1" style="position:absolute; left:200; top:100; width:100;background-color:red">
</Div>
</BODY>
</HTML>
<!--
parseInt 함수는 문자(열)을 숫자로 바꿔주는 함수입니다.
parseInt(theStr, baseNum) 에서
theStr : 문자(열) 부분을 나타냄.
baseNum : Base 진수 (10진수, 8진수, 16진수 등등)로서 생략 가능함.
ss1 = parseInt(str2.charAt(0),10); 를 보면요.
str2.charAt(0)은 str2 라는 변수에 담긴 글자 중 첫번째 글자를 의미합니다.
(만약 str2 = '12345' 라면 charAt(0)은 1, charAt(1)은 2, charAt(2)는 3이 됩니다. 이와 같은 형식을 인덱스라고 합니다. 그리고 charAt() 은 한글자를 추출해오는 함수라고 보시면 됩니다. 그리고 자바스크립트에서는 인덱스는 0부터 시작합니다.)
따라서 전체 문장의 의미는 str2라는 변수에 담긴 문자 중 첫번째 문자를 추출해서 10진수로 변환한 숫자를 ss1이라는 변수에 넣어라 라는 의미가 됩니다.
)
-->
next to before 의 example는 browser에 독립적인 layer를 사용하는 간단한 EX를 나타낸 것이다. 이와 비슷한 방법으로 layer에 관련된 다른 속성들을 이용하는 Ex도 많이 있지만 뒤에서 javascript의 활용 Examples 다룰 때 더 자세하게 설명하기로 하고 이상으로 layer에 대한 설명을 마칠까 한다.
'AllAcc?ess' 카테고리의 다른 글
| ajax 기반 기술 적용 사례 (0) | 2007.08.13 |
|---|---|
| 자바스크립트 함수와 연산자들 (0) | 2007.08.09 |
| 웹로봇(Web Robots) 막는 방법 (0) | 2007.08.05 |
| ActiveX 관련 Internet Explorer 변경 (0) | 2007.07.30 |
| @ 표시는 어떤 목적으로 쓰는 건가요? (0) | 2007.07.25 |
