jQuery: Method - 수치조작메서드

수치조작 메서드

css와 관련된 메서드

 

1. width & height

width() 너비

innerWidth() 너비+패딩

outerWidth() 너비+패딩,보더

height()

innerHeight()

outerHeight()

- $("선택자").width();
- $("선택자").width(값);

        $(function(){
            var w=$("div").width(); //사용자지정너비
            var iw=$("div").innerWidth(); //패딩 포함
            var ow=$("div").outerWidth(); //패딩, 보더 포함
            
            console.log("width:"+w);
            console.log("inner width:"+iw);
            console.log("outer width:"+ow);
            
            
            var h=$("div").height();
            var ih=$("div").innerHeight();
            var oh=$("div").outerHeight();
            
            console.log("height:"+h);
            console.log("inner height:"+ih);
            console.log("outer height:"+oh);
        })

 

 

2. position & offset

absolute 된 자식의 위치값을 얻어오거나 설정.

position: 부모요소 기준

offset: body 기준

 

- $("선택자").position().left;
- $("선택자").position().top;
- $("선택자").offset().left;
- $("선택자").offset().top;

  $(function(){
        //부모인 #wrap 기준
        var $left=$(".box").position().left;
        var $top=$(".box").position().top;
        
        $(".text1").text("left:"+$left+", top:"+$top);
        
        //body 기준
        var $left2=$(".box").offset().left;
        var $top2=$(".box").offset().top;
        
        $(".text2").text("left:"+$left2+", top:"+$top2);
    })

 

 

3. scroll

-$("선택자").scrollLeft(값) :스크롤의 왼쪽위치값

-$("선택자").scrollTop(값) : 스크롤의 위쪽에서의 위치값

 

        $(document).ready(function() {
            console.log($(".box").outerHeight());
            console.log($("p").outerHeight());

            $("button").click(function() {
                $(".box").animate({
                    scrollTop: $("p").outerHeight()
                }, 1000);
            })
        })