jQuery - Dimension

  outerHeight() - innerHeight + border
  outerWidth(true) - innerWidth + border + margin
  outerHeight(true) - innerHeight + border + margin

$(document).ready(function(){
    $("#btn01").click(function(){
    
     var txt = "";
        txt += "width: " + $("#div1").width() + "<br>";
        txt += "height: " + $("#div1").height() + "<br>";
        txt += "innerWidth: " + $("#div1").innerWidth() + "<br>";
        txt += "innerHeight: " + $("#div1").innerHeight() + "<br>";
        txt += "outerWidth: " + $("#div1").outerWidth() + "<br>";
        txt += "outerHeight: " + $("#div1").outerHeight() + "<br>";
        txt += "outerWidth(true): " + $("#div1").outerWidth(true) + "<br>";
        txt += "outerHeight(true): " + $("#div1").outerHeight(true) + "<br>";
        $("#div1").html(txt);        
 
    });
   

 * width() , height() 에 매개변수 값을 주면  새로운 값으로 세팅된다.

    $("#btn02").click(function(){
       $("#div1").width(500).height(200);    
    });

    - $(document) : HTML document
    - $(window)  : browser viewport
     document가 window 보다 클수 있다.  (스크롤 바 생김)

 

    $("#btn03").click(function(){
        var txt = "";
       txt += "Docuement W/H: " + $(document).width() + "x" + $(document).height() + "<br>";
       txt += "Window W/H: " + $(window).width()  + "x" + $(window).height() + "<br>";
        $("#div2").html(txt);
    });
   

  * 브라우저 창의 크기가 변할때 발생하는 onresize 이벤트 핸들러
    
    $(window).resize(function(){
        var txt = "";
       txt += "Docuement W/H: " + $(document).width() + "x" + $(document).height() + "<br>";
       txt += "Window W/H: " + $(window).width() + "x" + $(window).height() + "<br>";
       $("#div2").html(txt);      
    });
    
    
    * position() 함수
     리턴값의 left, top property 값에 좌표 저장

    $("#btn04").click(function(){
       $("#div3").animate({
            left: '200px',
            top: '10px',
        }, 4000);        
    });

    
    $("#btn05").click(function(){
        var pos = $("#div3").position();
        var txt = pos.left + "<br>" + pos.top;
        $("#div3").html(txt);
    
    });
});

---

* 클릭한 곳에 동그라미가 나타났다 사라지게 하기

 

$(document).ready(function(){

// 클릭시 좌표 알아내기
$(document).click(function(event){
    var txt = event.pageX + " " + event.pageY;

// $("#div1").css({
//  "left": event.pageX,
//  "top": event.pageY,
// }).text(txt);

// 클릭한 곳에 동그라미가 나타났다 사라지게 하기
    $circle = $("#circle");
    $circle.css({
        "left": event.pageX - ($circle.outerWidth(true) / 2),
        "top": event.pageY - ($circle.outerHeight(true) / 2),
});

// $circle.fadeIn(2000);
// $circle.fadeOut(2000);

    $circle.stop(true).fadeIn(100, function(){
    $circle.fadeOut(500);
    })
  });
});