스타일객체
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>스타일 객체 : style</title>
<style type="text/css">
#Panel1{
background-color:Yellow; width:"200px"; height:"200px";
}
</style>
<script language="javascript" type="text/javascript">
function ChangeColor(obj) {
obj.style.backgroundColor='';
}
function ChangeValue(obj){
obj.value = ""; //html레벨 : 각각의 속성을 지정
obj.size = 40;
obj.style.border = "1px solid red"; //css레벨 : style객체로 접근
}
function ChangeTextBox(){
document.getElementById("txt").value="";
document.getElementById("txt").style.backgroundColor = "red";
}
</script>
</head>
<body>
<div id="Panel1" onmouseover="this.style.backgroundColor='silver';" onmouseout="ChangeColor(this);">
<!-- 노랑->은색->노랑 (backgroundColor='' 속성에 아무값을 주지 않으면 처음값으로 돌아가게 된다.) -->
<!-- background-color -> backgroundColor 스크립트에 속성을 적을 때 이렇게 표기한다. -->
<input type="text" id="txt" value="아이디" onfocus="ChangeValue(this)"/>
<!-- 워터마크기능 -->
<input type="button" value="텍스트박스 모양 변경" onclick="ChangeTextBox();" />
</div>
</body>
</html>
'Programming > Javascript' 카테고리의 다른 글
| 웹브라우저 관련 예제들 (0) | 2013.01.22 |
|---|---|
| 자바스크립트 내장 객체 (0) | 2013.01.04 |
| onload이벤트 (0) | 2013.01.01 |
| 이벤트 정리 (0) | 2013.01.01 |
| 폼 유효성 검사2(submit&button 비교) (0) | 2013.01.01 |
