（知識）width、naturalWidth、clientWidth、offsetWidth區別整理

csRyan 發布于2019-08-01 18:42 / 1038人閱讀

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

今天在做圖片裁剪功能的時候，參考了下網友的資料，發現大家對圖片寬度的獲取方式不盡相同，于是詳細整理下各個屬性的區別（詳細請參考MDN）。

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

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

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

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

云服務器 GPU云服務器 naturalWidth clientWidth offsetWidth width

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

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

（知識）width、naturalWidth、clientWidth、offsetWidth區別整理

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

wenyiweb 2019-08-30 14:08 評論0 收藏0
（知識）width、naturalWidth、clientWidth、offsetWidth區別整理

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

dabai 2019-08-22 15:26 評論0 收藏0
JavaScript中的各種寬高屬性

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

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

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

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

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

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