30. 자바스크립트에서 스타일시트 접근
.NET프로그래밍/JavaScript 1.2 2009. 8. 11. 16:26 |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function ChangeStyle() {
var div1 = document.getElementById("myLayer");
div1.style.backgroundColor = "Yellow";
div1.style.border = "1px solid red";
div1.style.fontSize = "30pt";
}
function GoGo(flag) {
var div1 = document.getElementById("myLayer");
if (flag == -1) {
div1.style.left = (parseInt(div1.style.left) - 10) + "px";
}
else {
div1.style.left = (parseInt(div1.style.left.replace("px","")) + 10) + "px";
}
}
// 함수를 만드는 또 다른 모양?
var $ = document.getElementById; // 축약표시, AJAX, jQuery, prototype에서 많이 쓴다.
ShowLayer = function() {
var objLayer = document.getElementById("myLayer");
// 보이면 숨기고, 안 보이면 보여라... toggle
if (document.getElementById("myLayer").style.visibility == "visible") {
$("myLayer").style.visibility = "hidden";
objLayer.style.display = "none" // 영역자체를 없앰
}
else {
$("myLayer").style.visibility = "visible";
objLayer.style.display = "block"; // 영역보이기
}
};
</script>
</head>
<body>
<div id="myLayer" style="position:absolute;top:100px;border:1px solid black;left:100px;width:200px;height:50px;visibility:visible;">
안녕하세요.
</div>
<input type="button" value="레이어 스타일 변경" onclick="ChangeStyle();" />
<input type="button" value="왼쪽으로" onclick="GoGo(-1);" />
<input type="button" value="오른쪽으로" onclick="GoGo(1);" />
<a href="#" onclick="ShowLayer();">보이기/숨기기(토글)</a>
<hr />
<script>
function ChangeSize(num) {
var content = document.getElementById("txtContent");
content.style.height =
(parseInt(content.style.height.replace("px", "")) + num) + "px";
}
</script>
<a href="#" onclick="ChangeSize(10);">[+ 증가]</a>
<a href="#" onclick="ChangeSize(-10);">[- 감소]</a><br />
<textarea id="txtContent" cols="40" rows="4" style="height:100px;"></textarea>
</body>
</html>
'.NET프로그래밍 > JavaScript 1.2' 카테고리의 다른 글
| 32. 날짜관련 내장객체 (0) | 2009.08.13 |
|---|---|
| 31. 이벤트(Event) (0) | 2009.08.13 |
| 29. 드롭다운리스트체크(selectedIndex 사용) (0) | 2009.08.11 |
| 28. 폼(form)객체 - 2 (0) | 2009.08.11 |
| 27. 폼(form) 객체 - 입력 값에 대한 유효성 검사 (0) | 2009.08.11 |