56장 JavaScript Access(자바접근)

래곤 2009. 8. 11. 17:57

<결과화면>

안녕하세요

보이기/숨기기(토글) [+증가] [-감소]

<실행화면>

<!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 = "20pt";
        }

        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) + 10) + "px";
            }

        }
        //함수를 만드는 또 다른 모양 ??
        var $ = document.getElementById;

        ShowLaver = 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);" /><br />
<a href="#" onclick="ShowLaver();">보이기/숨기기(토글)</a>

<script>

    function ChangeSize(num) {
        var content = document.getElementById("txtContent");
        (parseInt(content.style.height.replace("px","")) + num) + "px";
    }



</script>
<a href="#" onclick="ChangeSize(10);">[+증가]</a>
<a href="#" onclick="ChangeSize(-10);">[-감소]</a> <br />

<textarea cols="40" rows="4" style= "height:100px ;"></textarea>

</body>
</html>