반응형
JavaScript에서 스타일시트를 적용하는 예제입니다.
<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 ($("myLayer").style.visibility == "visible") {
$("myLayer").style.visibility = "hidden"; //myLayer 속성 변경 가능
objLayer.style.display = "none"; // 영역 자체를 없앰
}
else
$("myLayer").style.visibility = "visible";
objLayer.style.display = "block"; // 영역 보이기
};
// textarea 크기 증가 감소 함수
function ChangeSize(num) {
var content = document.getElementById("txtContent");
content.style.height = (parseInt
(content.style.height.replace("px", ""))
+ num) + "px";
}
</script>
</head>
<body>
<div id="myLayer" style="
position:absolute;top:70px;left:70px;width:300px;height:100px;
border:1px solid;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>
<div style="position:absolute;top:200px;left:70px;">
<hr />
<a href="#" onclick="ChangeSize(10);">[+ 증가]</a>
<a href="#" onclick="ChangeSize(-10);">[- 감소]</a><br />
<textarea id="txtContent" cols="40" rows="4" style="height:100px;"></textarea>
</div>
</body>
</html>
30.JavaScript CSS.htm반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 32.JavaScript - 날짜관련내장객체 (0) | 2009.08.13 |
|---|---|
| 31.JavaScript - 이벤트 (Event) (0) | 2009.08.13 |
| 29.JavaScript - SelectedIndex (드롭다운리스트) (0) | 2009.08.12 |
| 28.JavaScript - Web Form 응용 (0) | 2009.08.11 |
| 27.JavaScript - Web Form (폼) (0) | 2009.08.11 |
Comments