国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

容易混淆的client-*,scroll-*,offset-*

Jokcy / 1838人閱讀

摘要：容易混淆上來不說話，先拋出幾個問題是時候談談它們之間的區別了，是不是已經混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。

容易混淆client-*,scroll-*,offset-*

Truth comes from practice

上來不說話，先拋出幾個問題：

offsetWidth offsetHeight offsetLeft offsetTop
clientWidth clientHeight clientLeft clientTop
scrollWidth scrollHeight scrollLeft scrollTop

是時候談談它們之間的區別了，是不是已經混亂了？好吧，一步一步來搞清楚這些東西是啥。

終于下決心來補上這個坑，俗話說的話：紙上得來終覺淺，絕知此事要躬行。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。

offset offsetWidth & offsetHeight

任何HTML元素的只讀屬性offsetWidth和offsetHeight已CSS像素返回它的屏幕尺寸，返回的尺寸包干元素的邊框和內邊距（width/height + border + padding），和滾動條。

offsetLeft & offsetTop

所有HTML元素擁有offsetLeft和offsetTop屬性來返回元素的X和Y坐標

相對于已定位元素的后代元素和一些其他元素（表格單元），這些屬性返回的坐標是相對于祖先元素

一般元素，則是相對于文檔，返回的是文檔坐標

offsetParent屬性指定這些屬性所相對的父元素，如果offsetParent為null，則這些屬性都是文檔坐標

//用offsetLeft和offsetTop來計算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}
client

client是一種間接指代，它就是web瀏覽器客戶端，專指它定義的窗口或視口。

clientWidth & clientHeight

clientWidth和clientHeight類似于offsetWidth和offsetHeight，不同的是不包含邊框大?。╳idth/height + padding）。同時在有滾動條的情況下，clientWidth和clientHeight在其返回值中也不包含滾動條。

對于類似、、等內聯元素，總是返回0

clientLeft & clientTop

返回元素的內邊距的外邊緣和他的邊框的外邊緣的水平距離和垂直距離，通常這些值就等于左邊和上邊的邊框寬度。

在有滾動條時，并且瀏覽器將這些滾動條放置在左側或頂部（反正我是沒見過），clientLEft和clientTop就包含這些滾動條的寬度。

scroll scrollWidth & scrollHeight

這兩個屬性是元素的內容區域加上內邊距，在加上任何溢出內容的尺寸.

因此，如果沒有溢出時，這些屬性與clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滾動條的位置

scrollLeft和scrollTop都是可寫的屬性，通過設置它們來讓元素中的內容滾動。

width和height計算實例

在這個實例中，我們觀察#inner實例，看看該元素各個屬性之間的關系




    
    Document
    


    

        

            

        

    




var inner = document.getElementById("inner");
var content = document.getElementById("content");
//輔助變量，獲取元素的寬和高
var style = getComputedStyle(inner);

//width & height
console.log("width= "+style.width);// ""
console.log("height= " + style.height);// ""

//padding
console.log("paddingt-top="+style.paddingTop);
console.log("paddingt-bottom= "+style.paddingBottom);
console.log("paddingt-left= "+style.paddingLeft);
console.log("paddingt-right= "+style.paddingRight);

//border
console.log("border-top-width= "+style.borderTopWidth);
console.log("border-bottom-width= "+style.borderBottomWidth);
console.log("border-left-width= "+style.borderLeftWidth);
console.log("border-right-width= "+style.borderRightWidth);

//offsetWidth & offsetWidth
console.log("offsetWidth= "+inner.offsetWidth);
console.log("offsetHeight= "+inner.offsetHeight);

//clientWidth & clientHeight
console.log("clientWidth= "+inner.clientWidth);
console.log("clientHeight= "+inner.clientHeight);

// scrollWidth & scrollHeight
console.log("scrollWidth= "+inner.scrollWidth);
console.log("scrollHeight= "+inner.scrollHeight);

// #content.offsetHeight
console.log("#content.offsetHeight= "+content.offsetHeight);

由于元素是外鏈的樣式，沒有設置style，因此如果直接使用inner.style.width返回的是空。必須使用getComputedStyle(el)來獲取元素的寬和高

說明：

寬度

width：本來應該是300，但是由于存在滾動條（在水平方向占據了空間），因此

`原本內容區寬度（width） - 滾動條寬度 = 300 - 17 = 283`

offsetWidth：元素實際所占空間，滾動條也是元素占據的空間，因此

`width + 滾動條 + padding + border = 300 + 100 + 100 + 20 + 20 = 540`

clientWidth：除去邊框占據的空間，且不包含滾動條

`width + padding = 283 + 100 + 100 = 483`

scrollWidth：由于水平方向沒有溢出，因此

`clientWidth + 溢出部分 = 483 + 0 = 483`

高度

height：由于垂直方向沒有滾動條占據空間，因此

`原本內容區高度（height）- 滾動條高度 = 200 - 0 = 200`

offsetHeight：元素實際所占空間，由于采取了滾動的方式處理了溢出的部分，因此

`height + padding + border = 200 + 100 + 100 + 20 + 20 = 440`

clientHeight：

`height + padding = 200 + 100 + 100 = 400`

scollHeight：客戶區高度，加上溢出的部分，即包含元素真實高度-內容區的高度

`height+padding+(#content.offsetHeight-height)=200+100+100+802-200=1002`

left和top實例

html結構與上一個實例一直。這樣可以




    
    Document

分別獲取屬性

var inner = document.getElementById("inner");

//offsetLeft & offsetTop
console.log("offsetLeft= "+inner.offsetLeft);
console.log("offsetTop= "+inner.offsetTop);

//clientLeft &  clientTop
console.log("clientLeft= "+inner.clientLeft);
console.log("clientTop= "+inner.clientTop);

// scrollLeft & scrollTop
console.log("scrollLeft= "+inner.scrollLeft);
console.log("scrollTop= "+inner.scrollTop);

//讓文檔滾動
inner.scrollTop = 30;

//為了計算的方便
var style = getComputedStyle(inner);

結果如圖

分析：

(#wrap為參照原點，設置了position:relative)

offsetLeft：即元素的x坐標，(#inner設置了自動居中)

`offsetLeft = (#wrap.width - #inner.offsetWidth)/2 =30`

offsetTop：即元素的y坐標，（style是#inner元素的計算后的樣式）

`offsetTop = style.marginTop = 50`

clientLeft 即 border-left-width

`clientLeft = style.borderLeftWidth = 20`

clientTop 即 border-top-width

`clientTop = style.borderTopWidth = 20`

scrollLeft 由于水平方向沒有滾動條，因此為0

scrollTop 即滾動條離#inner border-top內側的位置，一開始為0

總結

大部分人看完的當時是知道的，過些日子可能又忘。我覺得是這幾個概念的名字取得不好，不太容易讓人望文生義。說了那么多，不點個收藏以往日后回憶嗎？（世上竟有如此厚顏無恥之人，哈哈^_^#）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79934.html

相關文章

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上來不說話，先拋出幾個問題是時候談談它們之間的區別了，是不是已經混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...

    tolerious 評論0 收藏0

  • JS 中的offset、scroll、client總結

    摘要：兩張圖鎮樓，隨時翻閱指偏移，包括這個元素在文檔中占用的所有顯示寬度，包括滾動條，不包括隱藏的部分屬性返回一個對象的引用，這個對象是距離調用的父級元素中最近的在包含層次中最靠近的，并且是已進行過定位的容器元素。 經常碰到offset、scroll、client這幾個關鍵字，每次都要各種實驗，這里總結一下。 兩張圖鎮樓，隨時翻閱 showImg(https://segmentfault.c...

    The question 評論0 收藏0

  • JS 中的offset、scroll、client總結

    摘要：兩張圖鎮樓，隨時翻閱指偏移，包括這個元素在文檔中占用的所有顯示寬度，包括滾動條，不包括隱藏的部分屬性返回一個對象的引用，這個對象是距離調用的父級元素中最近的在包含層次中最靠近的，并且是已進行過定位的容器元素。 經常碰到offset、scroll、client這幾個關鍵字，每次都要各種實驗，這里總結一下。 兩張圖鎮樓，隨時翻閱 showImg(https://segmentfault.c...

    jerryloveemily 評論0 收藏0

  • JS寬高（client、offset、scroll）的介紹

    摘要：問題今日頭條的一道筆試題，的區別。結果如圖更詳細的介紹，請點擊 問題 今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區別。 分析 JS中document對象的寬高有三種，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

    mj 評論0 收藏0

  • 關于scroll,client,innear,avail,offset等的理解

    摘要：在寫實例理解，，，及等的時候，意外的又發現了值合并的問題，在這里同時記錄下偏移量的區別文件自己寫的示例樣式較多見的屬性指可見區的寬度網頁，或者元素指可見區的高度網頁，或者元素指元素的寬度網頁，或者元素指元素的高度網頁，或者元素滾動條的 在寫實例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的時候，意外的又發現了...

    Yangder 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<