left, posLeft, pixelLeft > script

본문 바로가기

script

left, posLeft, pixelLeft

작성일 13-01-17 11:35

페이지 정보

작성자서방님 조회 199회 댓글 1건

본문

posLeft,clientWidth 등은 다이나믹 스타일 속성들입니다.




- 스타일(Style) 객체의 Position 속성. -


요소를 left 포지션으로 설정할때 posLeft 속성으로 정함.

posLeft : 마지막 설정된 유닛에서 왼쪽 스타일 속성을 설정
속성값 -> left: length | percentage | auto

posTop : 마지막 설정된 유닛에서 상위 스타일 속성을 설정
속성값 -> top: length | percentage | auto


posWidth : 마지막 설정된 유닛에서 넓이 스타일 속성을 설정
속성값 -> width: length | percentage | auto


스타일(Style) 객체의 영역 속성....
pixelHeight : 요소의 높이 속성을 설정하거나 반환
속성값 -> height: length | percentage | auto

pixelLeft : 요소의 left 속성을 설정하거나 반환
속성값 -> left: length | percentage | auto

pixelTop : 요소의 top 속성을 설정하거나 반환
속성값 -> top: length | percentage | auto

pixelWidth : 요소의 너비 속성을 설정하거나 반환
속성값 -> width: length | percentage | auto

posHeight : 마지막 설정된 유닛에서 높이 스타일 속성을 설정
속성값 -> height: length | percentage | auto



- Dynamic HTML 메소드 -

1. add : 알맞은 컬렉션에 영역이나 옵션 요소를 더함
설정방법 --> object.add( element [ ,index ] )

2. remove : 옵션 컬렉션으로 부터 한 요소를 제거함
설정방법 --> object.remove( index )

3. moveTo!! : 윈도우 위치를 설정
설정방법 --> object.moveTo!!( x, y )



- Dynamic HTML 속성 -

1. clientHeight 스크롤바를 포함하는 요소의 높이를 반환
설정방법 -->object.clientHieght

2. clientWidth 스크롤바를 포함하는 요소의 폭을 반환
설정방법 -->object.clientWidth

3. scrollLeft : 요소가 왼쪽으로 스크롤 된 폭을 반환
설정방법 --> object.scrollLeft

4. scrollTop : 요소가 위쪽으로 스크롤 된 높이를 반환
설정방법 --> object.scrollTop

5. scrollHeight : 스크롤바를 움직이지 않는 상태에서 보여지는 요소의 전체 높이
설정방법 --> object.scrollHeight

6. scrollWidth : 스크롤바를 움직이지 않는 상태에서 보여지는 요소의 전체 폭
설정방법 --> object.scrollWidth



****

어느분의 강좌에 올려진 예를 가져다가 들어보면

function showLayer(X, e) {
var OBJ
if(n4) {
OBJ = document.layers[X]
OBJ.left = e.pageX - parseInt(OBJ.document.width/2)
OBJ.top = e.pageY
OBJ.visibility = "visible"
}
else if(e4) {
OBJ = document.all[X]
OBJ.style.pixelTop = event.clientY + document.body.scrollTop
OBJ.style.pixelLeft = event.clientX + document.body.scrollLeft - parseInt(OBJ.offsetWidth/2)
OBJ.style.visibility = "visible"
}
}

위는 클릭이벤트에 의해 인사창을 보여주고 감추는 것으로 X 에 보내온 레이어 이름을 내부변수 OBJ에 지정하고 이것을 사용하여 레이어를 다루는 예제인데,
Netscape Navication 4의 event 속성인 pageY 는 전체 문서를 기준으로 한 수직위치이고,
IE4의 clientY 는 보여지는 부분에서의 수직 위치입니다.
그래서, 스크롤바로 페이지의 문서를 이동하면 이동했는 것 만큼의 차이가 나게 됩니다.
이런점을 커버해 주기위해 페이지에서 이동한 거리를 나타내는 document.body.scrollTop 를 더해주면
nn4의 pageY와 같은 동작을 합니다.
OBJ.document.width는 Netscape Navigation 4에서 레이어의 크기를 나타내며,
IE 4 에서는 OBJ.offsetWidth 로 레이어의 크기를 나타냅니다.
이 둘은 border(테두리)를 포함한 레이어 전체의 크기인데.
이것을 넣은 이유는 링크의 중앙으로 안내창을 위치 시키기 위해서입니다.


****
오프셋(offset)은 두 번째 주소를 만들기 위해 기준이 되는 주소에 더해진 값을 의미.
예를 들면 C + 7 로 설정했을때 C값을 100으로 주었다면 수식의 결과는 107 이 된다.
여기에서 "7"이, 바로 오프셋이다. offset을 달리 말해서 "변위"라고도 함.
사전적 용어의 해석은 "기준점에서 떨어진 거리"

--------------------- [원본 메세지] ---------------------
운영자님 감사합니다.
제가 이 카페를 알고부터는 자바스크립트 실력이 좀 늘었습니다...
레이어라는 것이 있었지만 활용할줄 몰라구요.
마우스 이벤트도 그렀구요........
정말 감사합니다.
....
...
오버플로우가 뭐하느 건지 알았습니다...............


질문요..
제가 가지고 있는 책에는 .posLeft에 대한 내용이 없습니다.
넷스케이프의 자바스크립트는 아닌 것 같은데요...
이걸 모르겠습니다.

사실
document.body.scrollWidth (?) 가 요것도 정확히 모르겠구요...
이것은 alert!로 보면 0값이 나오더라구요..
그런데.............마우스이벤트를 이용한 프로그램 만들때 보면
event.x + document.body.scrollWidth(????)
이렇게 하던데요.....?( 정확히 적었는지 모르겠습니다.)
요 내용을 보면
현재의 마우스의 좌표값에다가 document.body.scrollWidth
이렇게하는 것을 보았습니다.
그런데 전 이것을 이해할수 가 없더라구요...

document.body.clientWidth
document.body.offsetWidth
document.body.scrollWidth
그리고 정확히 어떻게 사용해야 지 모르는
.posLeft

이것들이 언제 어떻때 사용하는지를 모르겠습니다........

 

JS :: 풀다운 메뉴

download.blog?fhandle=YmxvZzQ3NTQ2QGZzNi50aXN0b3J5LmNvbTovYXR0YWNoLzAvOTkuZ2lm

객체안에서 속성만들기

자바스크립트에서는 함수를 이용하여 속성과 메서드를 만들 수 있습니다.

|형식|
function (매개변수1, ...) { 
    this.이름1 = 매개변수1;  
}

|예제|
function menuStyle() { 
    this.menuDelta=3;  
}

this연산자

자기자신을 가리키는 연산자로 속성을 만드는 데 유용하게 사용됩니다.

|예제|
<html>  
<script language="JavaScript">  
<!-- 
    function cha() { 
        this.name = "차범근";  
        this.son = "차두리"; 
    }

    my_cha = new cha(); 
    document.write("이름 : " + my_cha.name + "<br>"); 
    document.write("아들 : " + my_cha.son + "<br>");  
//-->  
</script> 
<body>  
</body>  
</html>

  • style속성
    CSS속성을 부여합니다.
    • buttonhighlight : '화면배색'의 버튼highlight색상을 사용합니다.
    • menu : '화면배색'의 메뉴색을 사용합니다.
    • event객체
      이벤트를 처리합니다.
      • srcElement : 이벤트가 발생한 객체를 반환합니다.
        • className : 클래스네임을 반환합니다.
        • getAttribute("속성") : 해당객체의 속성을 반환합니다.
        • url : 해당객체에 설정된 url값을 반환합니다.
      • document객체
        문서내용을 담당합니다.
        • writeln() : 문서내용을 출력합니다. write()와 달리 줄바꿈을 수행합니다.
      • style속성
        CSS속성을 차용합니다.
        • offsetLeft : 상위모체와의 상대적인 x좌표값을 반환합니다.
        • offsetTop : 상위모체와의 상대적인 y좌표값을 반환합니다.
        • offsetWidth : 객체의 스크립트가 적용되는 영역의 너비입니다.
        • offsetheight : 객체의 스크립트가 적용되는 영역의 높이입니다.
        • clientLeft : 객체의 스크립트가 표현되는 영역의 상대적인 x좌표입니다.
        • clientTop : 객체의 스크립트가 표현되는 영역의 상대적인 y좌표입니다.
        • clientWidth : 객체의 스크립트가 표현되는 영역의 너비입니다.
        • clientHeight : 객체의 스크립트가 표현되는 영역의 높이입니다.
        • posLeft : left속성값을 수치화합니다.
        • posTop : top속성값을 수치화합니다.
        • posWidth : width값을 수치화합니다.
        • posHeight : height값을 수치화합니다.
        • pixelLeft : left속성값을 pixel단위로 수치화합니다.
        • pixelTop : Top속성값을 pixel단위로 수치화합니다.
        • pixelWidth : width값을 pixel단위로 수치화합니다.
        • pixelheight : height값을 pixel단위로 수치화합니다.
        • eval!() : 해당문자열을 검색하여 스크립트화합니다.

        <html>
        <head>
        <style type="text/css">
        <!--
            .mainMenus {                                // 메뉴스타일
                border : 2px buttonhighlight outset; 
                position : absolute;
            }

            .menuItem {                                 // 메인메뉴 항목
                cursor : hand;
                text-decoration : none;
                color : black;
                padding-left : 15px; 
                padding-right : 10px;
                font-size : 9pt;
            }

            .subMenus {                                 // 서브메뉴 항목
                border : 2px buttonhighlight outset;
                position : absolute; 
                visibility : hidden;
                top : -300px;
                width : 150px;
            }

            .selItem {                                  // 항목선택 스타일
                cursor : hand;
                text-decoration : none;
                color : black;
                padding-left : 15px;
                padding-right : 10px;
                font-size : 9pt;
            }
        //-->
        </style>
        </head>
        <body leftmargin=0 topmargin=0>

        <script language="JavaScript">
        <!--
        /* id:smartMenu class:mainMenus - 메인메뉴형식 id:idItem(메뉴1,메뉴2) class:menuItem - 메인메뉴항목
        id:idParent(메뉴1,메뉴2)+subMenu class:subMenus - 서브메뉴형식 class : selItem - 서브메뉴항목
        lastMenu = submenu.style */

        topY=0; rightX=0; bottomY=0; leftX=0;
        lastMenu = null;

        function menuStyle() {                        // 메인-서브메뉴간 간격
            this.menuDelta = 3;
        }

        // lastMenu = subMenu
        function hideAll() {                          // 메인메뉴 마우스오버시 서브메뉴숨김, 항목표시
            if (lastMenu != null) {
                lastMenu.visibility = "hidden";
                lastMenu.left = 0;
            }

            if (event.srcElement.className == "menuItem")
                event.srcElement.style.color="red"; 
        }

        function inAll() {                            // 메인항목 디폴트
            if (event.srcElement.className == "menuItem")
                event.srcElement.style.color = "black"; 
        }

        function jumpto() {                           // 항목선택시 URL이동
            if (event.srcElement.className == "selItem") {
                if (event.srcElement.getAttribute("target") == null)
                    window.location! = event.srcElement.url;
                else
                    window.open(event.srcElement.url, event.srcElement.getAttribute("target"))
            }
        }

        function highlight() {                        // 서브항목에 마우스오버시
            if (event.srcElement.className == "selItem") {
                event.srcElement.style.backgroundColor = "highlight";
                event.srcElement.style.color = "white";

                window.status = event.srcElement.url;
            }
        }

        function lowlight() {                         // 서브항목에 마우스아웃시
            if (event.srcElement.className == "selItem") {
                event.srcElement.style.backgroundColor = "";
                event.srcElement.style.color = "black";

                window.status = "";
            }
        }

        function main_menu() {                        // 메인메뉴 형식
            this.add_item = add_item;
            this.add_subItem = add_subItem;
            this.showMenu = showMenu;
            this.dis_subMenu = dis_subMenu;

            strHTML = "<div id='smartMenu' class='mainMenus'>\n";
            strHTML += "<table width='100%' bgcolor='menu' border=0 cellspacing=0>\n";
            strHTML += "<tr><td>\n";
            strHTML += "<table border=0 bgcolor='menu' cellspacing=0 cellpadding=0>\n";
            strHTML += "<tr><td>\n";
            strHTML += "<!-- 메인메뉴 -->\n";          // 메인항목이 들어갑니다.
            strHTML += "</td></tr></table>\n";
            strHTML += "</td></tr></table>\n";
            strHTML += "</div>\n";
            strHTML += "<!-- 서브메뉴 -->\n";          // 서브항목이 들어갑니다.
        }

        function add_item(idItem, text, hint, location, altLacation) {    // 메인항목추가 (id, 항목명, 풍선말, URL, 설명)
            var lookup = "<!-- 항목 " + idItem + " -->";
            if (strHTML.indexOf(lookup) != -1) {      // 이미 항목이 존재한다면
                alert(!idParent + "항목을 찾을 수 없습니다.");
                return false;
            }

            var menuItem = "";
            menuItem += "\n<!-- 항목 " + idItem + " -->\n";
            menuItem += "<td>\n";
            menuItem += "<div id='" + idItem + "' ";
            menuItem += "on_mouseout='inAll()' class='menuItem' ";

            if (hint != null)
                menuItem += "title=\"" + hint + "\" ";

            if (location != null) {
                menuItem += "href=" + location + ' ";
                menuItem += "on_mouseover='hideAll()'";
            } else { 
                menuItem += "href='#' ";
                menuItem += "on_mouseover=\"hideAll(); dis_subMenu('" + idItem + "');\" ";    // 선택항목표시, 서브메뉴좌표계산
                menuItem += "onclick=\"return false;\" ";
            }

            menuItem += ">" + text + "\n";
            menuItem += "</div>\n";
            menuItem += "</td>\n";

            menuItem += "<!-- 항목 끝 " + idItem + "-->\n\n";
            menuItem += "<!-- 메인메뉴 -->\n";

            strHTML = strHTML.replace("<!-- 메인메뉴 -->\n", menuItem);    // 본문의 '메인메뉴'주석을 menuItem스크립트로 변경
        }

        function add_subItem(idParent, text, hint, location, frame) {     // 서브항목추가 (id, 항목명, 풍선말, URL, 타겟)
            var menuItem = "";

            lookup = "<!-- 항목 " + idParent  + " -->";

            if (strHTML.indexOf(lookup) == -1) {      // 메인항목의 존재여부확인
                alert(!idParent + "(을)를 찾을 수 없습니다.");
                return false;
            }

            lookup = "<!-- 서브메뉴의 다음항목 " + idParent + " -->";

            if (strHTML.indexOf(lookup) == -1) {      // 서브메뉴항목이 처음이라면
                menuItem += "\n";
                menuItem += "<div on_mouseover='highlight()' on_mouseout='lowlight()' onclick='jump()' id='" + idParent + "subMenu' class='subMenus'>\n";
                menuItem += "<table border='0' bgcolor='menu' width='100%'>\n";
                menuItem += "<!-- 서브메뉴의 다음항목 " + idParent + " -->\n";
                menuItem += "</table>\n";
                menuItem += "</div>\n";
                menuItem += "<!-- 서브메뉴 -->\n";

                strHTML = strHTML.replace("<!-- 서브메뉴 -->\n", menuItem);
            }

            lookup = "<!-- 서브메뉴의 다음항목 " + idParent + " -->\n";

            menuItem = "<tr><td><div class='selItem' url='" + location +"' ";

            if (hint != null)
                menuItem += " title='" + hint + "' ";
            if (frame != null)
                menuItem += " target='" + frame + "' ";

            menuItem += ">" + text + "</div></td></tr>\n";
            menuItem += lookup;

            strHTML = strHTML.replace(lookup, menuItem);
        }

        function showMenu() {                         // 스크립트출력 및 상단좌표설정
            document.writeln(strHTML);
            dsp_updateIt();                           // 최상단좌표 지속설정
        }

        function dis_subMenu(idMainMenu) {            //서브메뉴 좌표설정(메인항목ID)
            var menu = eval!(idMainMenu);              // 메인항목
            var subMenu = eval!(idMainMenu + "subMenu.style");    // 서브메뉴스타일
            var smp = document.all["smartMenu"];      // 메인메뉴형식

            subMenu.left = sum_offset(menu, 'offsetLeft');    // 서브메뉴의 left좌표 = 메인항목의 left좌표(지속적인)
            subMenu.top = sum_offset(smp, 'offsetTop') + smp.offsetHeight + mstyle.menuDelta;    // 메인top + 메인height + 메인-서브간격
            subMenu.visibility = "visible";

            var smp_sub = document.all[idMainMenu + "subMenu"];    //서브메뉴

            leftX = smp_sub.style.posLeft;
            rightX = leftX + smp_sub.offsetWidth;

            topY = smp.offsetTop;
            bottomY = topY + smp.offsetHeight + smp_sub.offsetHeight;    // 하단좌표 = 메인top + 메인height + 서브height

            lastMenu = subMenu;
        }

        function sum_offset(idItem, offset_name) {    // 좌표검색
            var total_offset = 0;
            var item = eval!('idItem');

            do {                                      // 부모노드까지의 좌표를 검색합니다.
                total_offset += eval!('item.' + offset_name);
                item = eval!('item.offsetParent');
            } while (item != null);

            return total_offset;
        }

        function updateIt() {    // 해당컨테이너를 벗어난 범위에서 이벤트를 발생(클릭)시키면 서브메뉴가 숨겨집니다.
            var x = window.event.clientX;
            var y = window.event.clientY + document.body.scrollTop;

            if (x>rightX || x<leftX)
                hideAll();
            else if (y<topY || y>bottomY)
                hideAll();
        }

        function dsp_updateIt() {                     // 스크롤시 상단좌표를 재설정합니다.(지속적인)
            document.all["smartMenu"].style.top = document.body.scrollTop;
            setTimeout("dsp_updateIt()", 200);
        }

        document.body.onclick = hideAll;
        document.body.onscroll = hideAll;
        document.body.on_mousemove = updateIt;

        function show_allMenu() {                     // 전체함수를 호출/제어합니다.
            mstyle = new menuStyle();
            mstyle.menuDelta = 1;

            menu = new main_menu();
            menu.add_item("mn1", "포털", "포털", null, null);
            menu.add_item("mn2", "검색", "검색", null, null);

            menu.add_subItem("mn1", "네이버", "네이버", "http://www.naver.com");
            menu.add_subItem("mn1", "엠파스", "엠파스", "http://www.empas.com");
            menu.add_subItem("mn2", "Google", "Google", "http://www.Google.co.kr", "newFrm");

            menu.showMenu();
        }

        show_allMenu();

        //-->
        </script>

        <br /><br /><br />
        <center>메뉴만들기</center>
        </body>
        </html>


         

         

         

댓글목록

서방님님의 댓글

profile_image 서방님
작성일

간단요약. <br /><br /><br />호환성: 익스 - 아래 세가지 모두 지원 <br />넷스6,7 - offsetLeft만 지원(단 익스와 달리 선의 두께는 제외) <br /><br />요 약: <br /><br />expression() - ()안에는 자바스크립트 명령어,함수를 사용할 수 있읍니다. <br /><br />온라인문서 =&gt; http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/setexpression.asp <br /><br /><br /><br />offsetLeft - 부모요소를 기준한 좌표지점입니다. <br /><br />부모요소가 없다면 body를 기준으로 좌표가 지정됩니다. <br /><br /><br /><br />clientLeft - 좌표가 아닌 요소의 border굵기입니다. <br /><br />clientWidth와 관련이 있는데 이 속성은 style속성의 border의 두께를 <br />제외합니다. <br /><br />따라서 전체 요소의 넓이를 구하기 위해서는 <br /><br />clientWidth + clientLeft + clientRight 가 됩니다. <br /><br />* 위의 식은 offsetWidth와 동일합니다. <br />[예문]---------------------------------------------- <br /><br /><br />&lt;STYLE&gt; <br />body {background-color: expression(bg()); font-size:12px;} <br />&lt;/STYLE&gt; <br /><br /><br />&lt;script&gt; <br />&nbsp;&nbsp; function bg() <br />&nbsp;&nbsp; { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return '#99ccee'; <br />&nbsp;&nbsp; } <br />&lt;/script&gt; <br /><br />&lt;span id="elm1" style="border:15px solid #000000;width:100px;"&gt;요소&lt;/span&gt;&nbsp;&nbsp; <br /><br /><br />&lt;script&gt; <br /><br />&nbsp;&nbsp; var elm1 = document.getElementById('elm1'); <br /><br />&nbsp;&nbsp; document.write(elm1.offsetLeft,''); // 요소의 좌표(body기준) 10반환 <br />&nbsp;&nbsp; document.write(elm1.clientLeft,''); // 요소의 선넓이 border:15px반환 <br />&nbsp;&nbsp; <br />&lt;/script&gt;

전체 846건 9 페이지
게시물 검색
Copyright © 서방님.kr All rights reserved.
PC 버전으로 보기