[jQuery] Dimension

element의 사이즈나 browser widnows 사이즈

width() - content의 width

heigth() - content의 height

innerWidth() - width + padding

innerHeight() - height + padding

outerWidth() - innerWidth + border

outerHeight() - innerHeigth + border

outerWidth(true) - innerWidth + border + margin

outerHeight(true) - innerHeigth + border + margin

 

div의 값 뽑아내기

<script>
$(document).ready(function() {
	$('#btn01').click(function(){
    let txt = [];
    txt.push('width: ' + $('#div1').width());
    txt.push('width: ' + $('#div1').height());
    txt.push('width: ' + $('#div1').innerWidth());   
    txt.push('width: ' + $('#div1').innerHeight());
    txt.push('width: ' + $('#div1').outerWidth());
    txt.push('width: ' + $('#div1').outerHeight());
    txt.push('width: ' + $('#div1').outerWidth(true));   
    txt.push('width: ' + $('#div1').outerHeight(true));
        
    $('#div1').html(txt.join('<br>'));
    });
});
</script>

 

매개변수에 값을 주면 새로운 값으로 세팅된다

<script>
$(document).ready(function(){
	$('#btn02').click(function(){
    	$('#div1').width(500).height(200);
    });
});
</script>

 

document/window

$(document) : HTML document, 돔 객체

$(window) : browser viewport, 최상위 객체. window는 직접 보여지는 영역

document가 window보다 클 수 있다 (스크롤 발생)

<script>
$(document).ready(function(){
	function sizeDocWin() {
		let txt = [];
        txt.push("document W/H : " + $(document).width() + "x" + $(document).height()); 
        txt.push("window W/H : " + $(window).width() + "x" + $(window).height()); 
		$('#div2').html(txt.join('<br>'));
     }
     
     $('#btn3').click(sizeDocWin);
     $(window).resize(sizeDocWin); //window 사이즈 바뀔때마다 함수가 호출되게 한다
});
</script>

 

position() 함수

리턴값의 left, top property 값에 좌표 저장

<script>
$(document).ready(function(){
	$('btn04').click(function(){
    	$('#div3').animate({
        	left: '200px',
            top: '10px',
            }, 4000);
    });
    
    $('#btn05').click(function(){
    	const pos = $('#div3').position(); //position() : object 형태로 bottom, top, right
        const txt = pos.left + "<br>" + pos.top;
        $('#div3').html(txt);
    });
});
</script>

 

 

practice

* 이벤트 객체 : 사용자가 직접 만들지 않아도 기본적으로 제공한다

                        속성과 메소드가 존재한다

                         ex) 마우스 클릭 시 클릭한 좌표값, 이벤트를 발생 시킨 객체가 어떤 것인지

  기본 형식 : 익명 함수의 매개변수(event)가 '이벤트 객체'를 의미한다

  주요 속성 : target(이벤트를 발생시킨 객체 반환), type(이벤트의 이름을 반환), clientX, clientY(이벤트가 발생한 x, y값 반환. 브라우저 기준), screenX, screenY(이벤트가 발생한 x,y값 반환. 스크린 기준) ....

* jquery의 css를 이용해서 css 값을 변경할 수 있다

<script>
$(document).ready(function(){
	$(document).click(function(event) { //좌표를 뽑아내기 위해 event 매개변수를 준다
    let 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),
   });
});
</script>