（DOM） HTMLElement 中的 offset- 屬性

BWrong 發(fā)布于2019-08-20 11:37 / 1030人閱讀

摘要：一是一個只讀屬性，返回一個指向最近的指包含層級上的最近包含該元素的定位元素。很有用，因為和都是相對于其內邊距邊界的。對塊級元素來說，及描述了元素相對于的邊界框。二與是一個只讀屬性，返回當前元素左上角相對于節(jié)點的左邊界偏移的像素值。

一、offsetParent

parentObj = element.offsetParent;

HTMLElement.offsetParent是一個只讀屬性，返回一個指向最近的（指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則offsetParent為最近的table元素對象或根元素（標準模式下為html；quirks模式下為body）。當元素的 style.display設置為none時，offsetParent返回null。offsetParent很有用，因為offsetTop和offsetLeft都是相對于其內邊距邊界的。

對塊級元素來說，offsetTop、offsetLeft、offsetWidth及 offsetHeight描述了元素相對于offsetParent的邊界框。

二、offsetLeft與offsetTop

leftPos = element.offsetLeft;
topPos = element.offsetTop;

HTMLElement.offsetLeft是一個只讀屬性，返回當前元素左上角相對于HTMLElement.offsetParent節(jié)點的左邊界偏移的像素值。HTMLElement.offsetTop同理。
對于可被截斷到下一行的行內元素（如span），offsetTop和 offsetLeft描述的是第一個邊界框的位置。

三、offsetWidth與offsetHeight

offsetWidth = element.offsetWidht;
offsetHeight = element.offsetHeight;

HTMLElement.offsetWidth是一個只讀屬性，返回一個元素的布局寬度。一個典型的offsetWidth是測量元素的邊框(borders)、水平線上的內邊距(padding)、豎直方向滾動條(scroolbar)（如果存在的話）、以及CSS設置的寬度(width)的值。HTMLElement.offsetHeight同理。
對于可被截斷到下一行的行內元素（如span），offsetWidth和 offsetHeight描述的是邊界框的維度。

Short span. 
Long span that wraps withing this div.

上圖藍色陰影部分大小為span#long的offsetWidth與offsetHeight。

GPU云服務器云服務器 DOM元素屬性 dom自定義屬性 php獲取dom屬性 python中的屬性

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

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

antd源碼解讀（6）- Affix

摘要：這個組件是一個圖釘組件，使用的布局，讓組件固定在窗口的某一個位置上，并且可以在到達指定位置的時候才去固定。 Affix 這個組件是一個圖釘組件，使用的fixed布局，讓組件固定在窗口的某一個位置上，并且可以在到達指定位置的時候才去固定。 AffixProps 還是老樣子，看一個組件首先我們先來看看他可以傳入什么參數 // Affix export interface Affix...

coordinate35 2019-08-21 17:09 評論0 收藏0
《JavaScript 闖關記》之 DOM（下）

摘要：節(jié)點具有以下特征的值為的值為元素的標簽名的值為可能是或其子節(jié)點可能是或。添加的這些屬性分別對應于每個元素中都存在的下列標準特性。，有關元素的附加說明信息，一般通過工具提示條顯示出來。 Element 類型除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現 XML 或 HTML 元素，提供了對元素標簽名、子節(jié)點及特...

mudiyouyou 2019-08-20 12:26 評論0 收藏0
如何檢測css特性

摘要：如何檢測特性如果我們要檢測一個屬性是否支持支持屬性不支持屬性如果我們要檢測該屬性是否支持某值支持該屬性值瀏覽器不支持該屬性值如何動態(tài)賦值一個效果，并支持所有主流瀏覽器資料揭秘如何檢測css特性如果我們要檢測一個css屬性是否支持 var dom = document.createElement(p); if (textShadow in dom.style) { alert...

jsliang 2019-08-20 14:13 評論0 收藏0
如何檢測css特性

摘要：如何檢測特性如果我們要檢測一個屬性是否支持支持屬性不支持屬性如果我們要檢測該屬性是否支持某值支持該屬性值瀏覽器不支持該屬性值如何動態(tài)賦值一個效果，并支持所有主流瀏覽器資料揭秘如何檢測css特性如果我們要檢測一個css屬性是否支持 var dom = document.createElement(p); if (textShadow in dom.style) { alert...

izhuhaodev 2019-08-30 15:52 評論0 收藏0
JavaScript高級-unit10 DOM

摘要：在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。一致性檢測屬性提供相應信息和功能的對象，與瀏覽器對的實現直接對應。在中，標簽名始終都以全部大寫表示而在有時包括，標簽名始終與源代碼中的保持一致。設置的特性名統(tǒng)一轉為小寫。簡介 DOM描述了一個層次化的節(jié)點樹，允許開發(fā)人員添加、移除和修改頁面。節(jié)點根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節(jié)點： ...

kohoh_ 2019-08-23 10:42 評論0 收藏0