 |
onMouseOver로 스타일 변경 |  |
 Javascript Style을 사용한 예제
<table border=1>
<tr>
<td bgcolor="dddddd"
onmouseover='this.style.backgroundColor="#ffff00"'
onmouseout='this.style.backgroundColor="#dddddd"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.
</td>
</tr>
<tr>
<td onmouseover='this.style.fontWeight="bold"'
onmouseout='this.style.fontWeight="normal"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.
</td>
</tr>
<tr>
<td onmouseover='this.style.fontStyle="italic"'
onmouseout='this.style.fontStyle="normal"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.
</td>
</tr>
<tr>
<td onmouseover='this.style.fontFamily="궁서체"'
onmouseout='this.style.fontFamily="굴림체"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.
</td>
</tr>
<tr>
<td onmouseover='this.style.color="red"'
onmouseout='this.style.color="black"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.
</td>
</tr>
<tr>
<td bgcolor="00ffff"
onmouseover='this.style.fontFamily="궁서체"; this.style.backgroundColor="#ffff00"'
onmouseout='this.style.fontFamily="굴림체"; this.style.backgroundColor="#00ffff"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.
</td>
</tr>
<tr>
<td style="color:blue" bgcolor="00ffff"
onmouseover='this.style.fontFamily="궁서체";
this.style.backgroundColor="#ffff00"; this.style.color="#ff0000"'
onmouseout='this.style.fontFamily="굴림체";
this.style.backgroundColor="#00ffff"; this.style.color="#0000ff"'
onclick='document.location="xmustyle.html"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.<br>
클릭하면 현재 페이지로 다시 연결됩니다.
</td>
</tr>
<tr>
<td>
<span style="color:green; font-family:궁서체; background-color:#ddeeff"
onmouseover='this.style.fontFamily="궁서체";
this.style.backgroundColor="#ffeecc"; this.style.color="#ff0000"'
onmouseout='this.style.fontFamily="궁서체";
this.style.backgroundColor="#ddeeff"; this.style.color="green"'
onclick='document.location="xmustyle.html"'>
마우스를 올리거나 내리면 스타일이 변경됩니다.<br>
라인모드에서도 클릭하면 현재 페이지로 다시 연결됩니다.</span>
</td>
</tr>
</table>
this.style.[javascript style]로서 현재의 스타일을 javascript로 지정한다.
여기서 table은 자동 조절기능이 있으므로 그 스타일의 크기에 따라 전체적으로 조정되므로 실제로 사용 할 때는 가급적 크기가 조정되는(resize) 스타일의 사용을 피하는 것이 좋다.스타일을 복합적으로 사용 할 때는 javascript 구분자 ';' 를 사용한다. onclick으로(onclick='document.location="xmustyle.html"') 현재 페이지에 연결하였다. 그러나 클릭하였을 때 연결할 페이지를 바꾸면 원하는 페이지에 연결시킬 수 있다. 이렇게 함으로서 td나 div 등 블럭레벨에서 뿐 아니라 span과 같은 라인 레벨의 클릭으로도 페이지를 연결 시킬 수 있게 된다. |
 제공 | 이 문서(http://trio.co.kr/webrefer/jsex/xmustyle.html)는 자유로이 연결 사용이 가능함. |
|