成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【前端工程師手冊(cè)】前端應(yīng)該知道的各種寬高

Hujiawei / 1631人閱讀

摘要：和都是相對(duì)于內(nèi)邊距邊界的。和即為向上滾動(dòng)時(shí)，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性

引子

曾經(jīng)校招面試的時(shí)候，學(xué)習(xí)了三個(gè)月前端的我去某廠面試，面試官循循善誘考察了一個(gè)開(kāi)發(fā)中的實(shí)際場(chǎng)景，其中有需要用到某元素的高度，面試官問(wèn)我clientHeight和offsetHeight的區(qū)別是什么，我當(dāng)時(shí)一臉懵逼，這個(gè)問(wèn)題對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)已經(jīng)完全超綱了...面試結(jié)果自然是面試官感謝我來(lái)參加面試...

好漢不提當(dāng)年囧，今天總結(jié)一下常見(jiàn)的元素各種寬高。

一些height和width clientHeight和clientWidth

沒(méi)有橫向滾動(dòng)條時(shí)：clientHeight = css設(shè)置的height + paddingTop + paddingBottom

有橫向滾動(dòng)條時(shí)：clientHeight = css設(shè)置的height + paddingTop + paddingBottom - 滾動(dòng)條的高度

clientWidth類似，就不再贅述

ps：這個(gè)屬性是只讀屬性，對(duì)于沒(méi)有定義CSS或者內(nèi)聯(lián)布局盒子的元素為0

offsetHeight和offsetWidth

offsetHeight = ccss設(shè)置的height + paddingTop + paddingBottom + borderTop + borderBottom

offsetWidth類似，就不再贅述

scrollHeight和scrollWidth

無(wú)滾動(dòng)條時(shí)：scrollHeight = clientHeight = css設(shè)置的height + paddingTop + paddingBottom

有滾動(dòng)條時(shí)：scrollHeight = 實(shí)際內(nèi)容的高度 + paddingTop + paddingBottom（即要算上因?yàn)闈L動(dòng)被遮住的內(nèi)容高度

scrollWidth不再贅述

一些Top和Left clientLeft和clientTop

clientTop = borderTop
clientLeft = borderLeft

offsetLeft和offsetTop

以offsetTop為例，搞懂它首先要明白o(hù)ffsetParent是什么

offsetParent是元素最近的有定位的父元素，如果父元素中沒(méi)有有定位的，那么就是最近的 table, table cell 或根元素。

offsetTop 和 offsetLeft 都是相對(duì)于offsetParent內(nèi)邊距邊界的。

scrollTop和scrollLeft

scrollTop即為向上滾動(dòng)時(shí)，元素內(nèi)容區(qū)被遮住的那一部分。

scrollLeft同理

參考

JavaScript 中的各種寬高屬性

MDN

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

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

相關(guān)文章

  • 【前端工程師手冊(cè)】前端應(yīng)該知道的各種寬高

    摘要：和都是相對(duì)于內(nèi)邊距邊界的。和即為向上滾動(dòng)時(shí)，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性 引子 曾經(jīng)校招面試的時(shí)候，學(xué)習(xí)了三個(gè)月前端的我去某廠面試，面試官循循善誘考察了一個(gè)開(kāi)發(fā)中的實(shí)際場(chǎng)景，其中有需要用到某元素的高度，面試官問(wèn)我clientHeight和offsetHeight的區(qū)別是什么，我當(dāng)時(shí)一臉懵逼，這個(gè)問(wèn)題對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)已經(jīng)完全超綱了...面試結(jié)果自然是面試官感謝我來(lái)...

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

  • 前端每周清單半年盤(pán)點(diǎn)之 CSS 篇

    摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。它能夠?yàn)槲覀兲峁╊愃朴陬A(yù)處理器命名空間等多方面的輔助。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：f...

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

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

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

  • 【前端工程師手冊(cè)】學(xué)習(xí)回流和重繪（reflow和repaint）

    摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過(guò)程，叫做重繪。顯然回流帶來(lái)的代價(jià)大于重繪，因?yàn)橹乩L僅僅是重新畫(huà)一遍元素而已，但是重繪是重新計(jì)算重新畫(huà)。不然這會(huì)導(dǎo)致大量地讀寫(xiě)這個(gè)結(jié)點(diǎn)的屬性。 瀏覽器的大概工作流程 以普通的HTML頁(yè)面為例： 解析HTML文檔，生成dom樹(shù) 解析css產(chǎn)生css規(guī)則樹(shù) 解析JavaScript，通過(guò)DOM-API來(lái)操作dom樹(shù)和...

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

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

0條評(píng)論

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