深入學習jQuery元素尺寸和位置操作 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　對于javascript來說，元素尺寸有scroll、offset、client三大屬性，以及一個強大的getBoundingClientRect()方法。而jQuery有著對應的更為簡便的方法。本文將詳細介紹jQuery中的元素尺寸和位置操作

尺寸設置

　　在CSS中，寬高有三種表示，分別是content-box、padding-box和border-box里的三種寬高。可以分別對應于jQuery中height()/width()、innerHeight()/innerWidth()和outerHeight()/outerWidth()

　　[注意]對于原生javascript來說，offsetWidth類屬性無法獲取隱藏元的值，而jQuery這三個獲取寬高的方法可以

【1】設置寬高

height()/width()

　　當height()/width()方法中不包含任何參數時，可以獲取設置寬高值

　　css(width)和width()之間的區別在于width()返回一個沒有單位的數值(如400)，而css(width)返回帶有完整單位的字符串(400px)。當然，高度也類似

<div id="test" style="height:30px;width:10em">測試內容</div>
<button id="btn">獲取寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('css()獲取的高度:' + $('#test').css('height') + ';css()獲取的寬度:' + $('#test').css('width') + ';height()獲取的高度:' + $('#test').height() + ';width()獲取的寬度:' + $('#test').width());
})
</script>

　　這個方法同樣能計算出window和document的寬高

$(window).width();
$(document).width();
$(window).height();
$(document).height();

<div id="test">測試內容</div>
<button id="btn">獲取寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('內容寬:' + $(this).width() +';內容高:' + $(this).height() +　';頁面寬:' + $(document).width() +';頁面高:' + $(document).height() +　';window寬:' + $(window).width() +';window高:' + $(window).height()　)
})
</script>

height(value)/width(value)

　　當height()/width()方法中包含一個參數時，可以設置寬高值。這個參數可以是一個正整數代表的像素數，或是整數和一個可選的附加單位(默認是px)

<div id="test" style="background-color:pink">測試內容</div>
<button id="btn">設置寬高</button>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#test').height(30).width(100);
})
</script>

height(function(index,currentHeight))/width(function(index,currentWidth))

　　height()/width()方法也可以以一個函數作為參數，該函數接受兩個參數，index參數表示元素在集合中的位置，currentHeight/currentWidth參數表示原來的寬高。在這個函數中，this指向元素集合中的當前元素，最終返回設置的寬高

<button id="btn">設置寬高</button>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<script>
$("#btn").click(function(){
    $('div').height(30).css('background-color','orange').width(function(index,currentWidth){
            return currentWidth*(index+1)/10
    })
})
</script>

【2】客戶區寬高

　　客戶區寬高指設置寬高加上padding值。在javascript中，客戶區寬高用clientWidth/clientHeight表示。而在jQuery中，用innerHeight()和innerWidth()方法表示

innerHeight()/innerWidth()

　　innerHeight()/innerWidth()方法不適用于window和document對象，可以使用height()/width()代替

<div id="test" style="width:100px;height:30px;padding:2px;">測試內容</div>
<button id="btn">設置寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('設置高:' + $('#test').height() + ';設置寬:' + $('#test').width() + ';客戶區高:' + $('#test').innerHeight() + ';客戶區寬:' + $('#test').innerWidth())
})
</script>

【3】全寬高

　　全寬高指設置寬高再加上padding、border、margin(可選)

　　如果獲取border-box的寬高，javascript使用offsetwidth/offsetHeight獲取。而在jQuery中，有著功能更強大的outerWidth()/outerHeight()方法

outerWidth()/outerHeight()

　　outerWidth()/outerHeight()方法用來獲取元素集合中第一個元素的當前計算寬高值，包括padding，border和選擇性的margin。返回一個整數(不包含px)表示的值

　　當參數為false或無參數時，表示不包括margin，否則包括margin

　　[注意]如果在一個空集合上調用該方法，則會返回null

　　outerWidth()/outerHeight()方法不適用于window和document對象，可以使用height()/width()代替

<div id="test" style="width:100px;height:30px;padding:2px;border:1px solid black;margin:10px">測試內容</div>
<button id="btn">設置寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('border-box的寬度' + $('#test').outerWidth() + ';border-box的高度' + $('#test').outerHeight() + ';margin-box的寬度' + $('#test').outerWidth(true) + ';margin-box的高度' + $('#test').outerHeight(true))
})
</script>

位置設置

【1】offsetParent()

　　jQuery通過offsetParent()找到元素的定位父級

　　jQuery與javascript有些不同，規則如下

　　1、當元素本身不是fixed定位，且父級元素存在經過定位的元素，offsetParent()的結果為離自身元素最近的經過定位的父級元素

　　2、當元素本身具有fixed定位，或父級元素都未經過定位，則offsetParent()的結果為html

　　3、body元素的offsetParent()的結果也是html

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="position:relative;">
    <div id="test1" style="position:absolute;"></div>
    <div id="test2" style="position:fixed;"></div>
</div>
<script>
console.log($('#test1').offsetParent());//'<div id="box>'
console.log($('#test2').offsetParent());//'<html>'
console.log($('#box').offsetParent());//'<html>'
console.log($('body').offsetParent());//'<html>'
</script>

【2】position()

　　position()方法不接受參數，用來獲取匹配元素中第一個元素的相對于定位父級的坐標

　　position()返回一個包含top和left屬性的對象，相當于javascript中的offsetTop和offsetLeft

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="position:relative;">
    <div id="test1" style="position:absolute;"></div>
    <div id="test2" style="position:fixed;"></div>
</div>
<script>
console.log($('#test1').position().top,$('#test1').position().left);//0 0 
console.log($('#test2').position().top,$('#test2').position().left);//8 8 
</script>

【3】offset()

offset()

　　當offset()方法沒有參數時，在匹配的元素集合中，獲取的第一個元素的當前坐標，坐標相對于文檔　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="position:relative;">
    <div id="test1" style="position:absolute;"></div>
    <div id="test2" style="position:fixed;"></div>
</div>
<script>
console.log($('#test1').offset().top,$('#test1').offset().left);//8 8
console.log($('#test2').offset().top,$('#test2').offset().left);//8 8 
</script>

offset(coordinates)

　　offset()方法可以接受一個包含top和left屬性的對象，用整數指明元素的新頂部和左邊坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">改變按鈕位置</button>
<script>
$('#btn').click(function(){
    $(this).offset({top:20,left:20})
})
</script>

offset(function(index,coords))

　　offset()方法可以接受一個函數作為參數。在函數中，元素在匹配的元素集合中的索引位置作為第一個參數，當前坐標作為第二個參數。這個函數返回一個包含top和left屬性的對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">改變按鈕位置</button>
<script>
$('#btn').click(function(){
    $(this).offset(function(index,coords){
        return {left: coords.left + 10, top:coords.top}
    })
})
</script>

【4】scrollTop()/scrollLeft()

scrollTop()/scrollLeft()

　　scrollTop()/scrollLeft()方法不帶參數時，用來獲取匹配元素集合中第一個元素的當前水平或垂直滾動條位置

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn'>點擊</button>
<div id="result"></div>
<script>
$('#btn').click(function(){
    $('#result').html('scrollTop:' + $('#test').scrollTop() + ';scrollLeft:' + $('#test').scrollLeft())
})
</script>

scrollLeft(value)/scrollTop(value)

　　scrollTop()/scrollLeft()方法可以接受一個用來設置滾動條水平或垂直位置的正整數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn1'>向下滾動</button>
<button id='btn2'>向上滾動</button>
<script>
$('#btn1').click(function(){
    $('#test').scrollTop($('#test').scrollTop() + 10);
})
$('#btn2').click(function(){
    $('#test').scrollTop($('#test').scrollTop() - 10);
})
</script>

最后

　　關于元素的位置和尺寸操作，jQuery把javascript中的scroll、offset、client和getBoundingClientRect()重新整合。對于常用的寬高尺寸設置了width/height、innerWidth/innerHeight、outerWidth/outerHeight這6個方法；而對于位置操作，則設置了position()、offset()/offsetParent()、scrollLeft()/scrollTop()這5個方法

　　歡迎交流

文章列表