（知識）width、naturalWidth、clientWidth、offsetWidth區(qū)別整理

wenyiweb 發(fā)布于2019-08-30 14:08 / 2927人閱讀

摘要：，屬性表示元素的內(nèi)部寬度，以像素計。該屬性包括內(nèi)邊距，但不包括垂直滾動條如果有邊框和外邊距。該屬性值會被四舍五入為一個整數(shù)。

今天在做圖片裁剪功能的時候，參考了下網(wǎng)友的資料，發(fā)現(xiàn)大家對圖片寬度的獲取方式不盡相同，于是詳細(xì)整理下各個屬性的區(qū)別（詳細(xì)請參考MDN）。

1，HTMLImageElement.width是一個unsigned long 類型反映了 width HTML 屬性, 說明圖像在CSS像素中渲染的寬度。

2，HTMLImageElement.naturalWidth返回一個 unsigned long 類型,表明圖像在CSS像素中固有的寬度,如果可用的話；否則, 返回0。

3，Element.clientWidth 屬性表示元素的內(nèi)部寬度，以像素計。該屬性包括內(nèi)邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。該屬性值會被四舍五入為一個整數(shù)。如果你需要一個小數(shù)值，可使用 element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。")。

4，HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的布局寬度。一個典型的（譯者注：各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內(nèi)邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）、以及CSS設(shè)置的寬度(width)的值。

云服務(wù)器 GPU云服務(wù)器 naturalWidth clientWidth offsetWidth width

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

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

相關(guān)文章

（知識）width、naturalWidth、clientWidth、offsetWidth區(qū)別整理

摘要：，屬性表示元素的內(nèi)部寬度，以像素計。該屬性包括內(nèi)邊距，但不包括垂直滾動條如果有邊框和外邊距。該屬性值會被四舍五入為一個整數(shù)。今天在做圖片裁剪功能的時候，參考了下網(wǎng)友的資料，發(fā)現(xiàn)大家對圖片寬度的獲取方式不盡相同，于是詳細(xì)整理下各個屬性的區(qū)別（詳細(xì)請參考MDN）。 1，HTMLImageElement.width是一個unsigned long 類型反映了 width HTML 屬性, ...

dabai 2019-08-22 15:26 評論0 收藏0
（知識）width、naturalWidth、clientWidth、offsetWidth區(qū)別整理

摘要：，屬性表示元素的內(nèi)部寬度，以像素計。該屬性包括內(nèi)邊距，但不包括垂直滾動條如果有邊框和外邊距。該屬性值會被四舍五入為一個整數(shù)。今天在做圖片裁剪功能的時候，參考了下網(wǎng)友的資料，發(fā)現(xiàn)大家對圖片寬度的獲取方式不盡相同，于是詳細(xì)整理下各個屬性的區(qū)別（詳細(xì)請參考MDN）。 1，HTMLImageElement.width是一個unsigned long 類型反映了 width HTML 屬性, ...

csRyan 2019-08-01 18:42 評論0 收藏0
JavaScript中的各種寬高屬性

摘要：在中，存在著多的關(guān)于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當(dāng)前顯示文檔的。如果出現(xiàn)滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。在js中，存在著N多的關(guān)于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 評論0 收藏0
整理獲取 viewport 和 element 尺寸和位置方法

摘要：整理獲取和尺寸和位置方法更多前端技術(shù)和知識點，搜索訂閱號菌訂閱視口頁面或窗口的位置和寬高獲取視口寬高下面方法是包括滾動條的寬高，不支持滾動條另外瀏覽器兼容差，可獲取包括工具欄的寬高頁面滾動位置返回整個頁面的滾動的位置，與返回的值一致，前者是 showImg(https://segmentfault.com/img/remote/1460000018860153?w=640&h=426)...

dinfer 2019-08-23 16:54 評論0 收藏0
JS寬高（client、offset、scroll）的介紹

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

mj 2019-08-20 18:21 評論0 收藏0