jQuery | javascript | CSS

30.JavaScript - JavaScript에서 스타일시트 적용

Godffs 2009. 8. 12. 01:33
반응형
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>


반응형