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

資訊專欄INFORMATION COLUMN

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

tolerious / 602人閱讀

摘要：容易混淆上來不說話，先拋出幾個(gè)問題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類似于和，不同的是不包含邊框大小。

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

Truth comes from practice

上來不說話，先拋出幾個(gè)問題：

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

是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了？好吧，一步一步來搞清楚這些東西是啥。

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

offset offsetWidth & offsetHeight

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

offsetLeft & offsetTop

所有HTML元素?fù)碛衞ffsetLeft和offsetTop屬性來返回元素的X和Y坐標(biāo)

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

一般元素，則是相對(duì)于文檔，返回的是文檔坐標(biāo)

offsetParent屬性指定這些屬性所相對(duì)的父元素，如果offsetParent為null，則這些屬性都是文檔坐標(biāo)

//用offsetLeft和offsetTop來計(jì)算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，不同的是不包含邊框大小（width/height + padding）。同時(shí)在有滾動(dòng)條的情況下，clientWidth和clientHeight在其返回值中也不包含滾動(dòng)條。

對(duì)于類似、、等內(nèi)聯(lián)元素，總是返回0

clientLeft & clientTop

返回元素的內(nèi)邊距的外邊緣和他的邊框的外邊緣的水平距離和垂直距離，通常這些值就等于左邊和上邊的邊框?qū)挾取?/p>

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

scroll scrollWidth & scrollHeight

這兩個(gè)屬性是元素的內(nèi)容區(qū)域加上內(nèi)邊距，在加上任何溢出內(nèi)容的尺寸.

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

scrollLeft & scrollTop

指定的是元素的滾動(dòng)條的位置

scrollLeft和scrollTop都是可寫的屬性，通過設(shè)置它們來讓元素中的內(nèi)容滾動(dòng)。

width和height計(jì)算實(shí)例

在這個(gè)實(shí)例中，我們觀察#inner實(shí)例，看看該元素各個(gè)屬性之間的關(guān)系




    
    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);

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

說明：

寬度

width：本來應(yīng)該是300，但是由于存在滾動(dòng)條（在水平方向占據(jù)了空間），因此

`原本內(nèi)容區(qū)寬度（width） - 滾動(dòng)條寬度 = 300 - 17 = 283`

offsetWidth：元素實(shí)際所占空間，滾動(dòng)條也是元素占據(jù)的空間，因此

`width + 滾動(dòng)條 + padding + border = 300 + 100 + 100 + 20 + 20 = 540`

clientWidth：除去邊框占據(jù)的空間，且不包含滾動(dòng)條

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

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

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

高度

height：由于垂直方向沒有滾動(dòng)條占據(jù)空間，因此

`原本內(nèi)容區(qū)高度（height）- 滾動(dòng)條高度 = 200 - 0 = 200`

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

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

clientHeight：

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

scollHeight：客戶區(qū)高度，加上溢出的部分，即包含元素真實(shí)高度-內(nèi)容區(qū)的高度

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

left和top實(shí)例

html結(jié)構(gòu)與上一個(gè)實(shí)例一直。這樣可以




    
    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);

//讓文檔滾動(dòng)
inner.scrollTop = 30;

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

結(jié)果如圖

分析：

(#wrap為參照原點(diǎn)，設(shè)置了position:relative)

offsetLeft：即元素的x坐標(biāo)，(#inner設(shè)置了自動(dòng)居中)

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

offsetTop：即元素的y坐標(biāo)，（style是#inner元素的計(jì)算后的樣式）

`offsetTop = style.marginTop = 50`

clientLeft 即 border-left-width

`clientLeft = style.borderLeftWidth = 20`

clientTop 即 border-top-width

`clientTop = style.borderTopWidth = 20`

scrollLeft 由于水平方向沒有滾動(dòng)條，因此為0

scrollTop 即滾動(dòng)條離#inner border-top內(nèi)側(cè)的位置，一開始為0

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/49921.html

相關(guān)文章

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

    摘要：容易混淆上來不說話，先拋出幾個(gè)問題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個(gè)問題： offsetWidth offs...

    Jokcy 評(píng)論0 收藏0

  • JS 中的offset、scroll、client總結(jié)

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

    The question 評(píng)論0 收藏0

  • JS 中的offset、scroll、client總結(jié)

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

    jerryloveemily 評(píng)論0 收藏0

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

    摘要：?jiǎn)栴}今日頭條的一道筆試題，的區(qū)別。結(jié)果如圖更詳細(xì)的介紹，請(qǐng)點(diǎn)擊 問題 今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區(qū)別。 分析 JS中document對(duì)象的寬高有三種，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

    mj 評(píng)論0 收藏0

  • 關(guān)于scroll,client,innear,avail,offset等的理解

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

    Yangder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<