offsetLeft和offsetTop怎麼用

2021-08-22 09:53:16 字數 493 閱讀 2430

如果需要動態計算標籤的距離時,我們時常會用到這兩個屬性offsetleft和offsettop,我的使用場景是,我有乙個背景的div1,另乙個div2並不在div1內,但是我需要讓div2在div1的又下角,如果我使用margin-left或margin-top,在不同解析度之間切換時都會有改變,所以這時候就用到啦這兩個屬性。

先貼上兩段**,你們粘到自己編輯器裡試試效果,f12看下控制台的區別

情況一:

情況二:

情況二比情況一多了乙個屬性position:absolute,這樣控制台列印的就不一樣啦,重點來啦,在頁面任一元素的offsetleft或offsettop總是找到離其最近的已經定位的元素定位,如果沒有,就根據根節點body定位,然後獲取其left值或top值。

這次沒啥好總結的,我叫浪達,乙個想成為架構師(hou) (gong) (wang)的程式設計師

前端底層 offsetLeft

div.attributes 是所有標籤屬性構成的資料集合 div.classlist 是所有class名構成的陣列集合 在classlist的原型鏈上看以看到add 和remove class的方法 div.classname 方法 刪除所有class名 替換乙個或多個名字 div.chassli...

和 區別和聯絡, 和 區別和聯絡

和 區別和聯絡,和 區別和聯絡,實際專案中,什麼情況用哪種?首先,和 的聯絡 共同點 和 都可以用作 邏輯與 運算子,都是雙目運算子。具體要看使用時的具體條件來決定。無論使用哪種運算子,對最終的運算結果都沒有影響。情況1 當上述的運算元是boolean型別變數時,和 都可以用作邏輯與運算子。情況2 ...

rpx和樣式和class和flex

5 style 靜態的樣式統一寫到 class 中。style 接收動態的樣式,在執行時會進行解析,請盡量避免將靜態的樣式寫進 style 中,以免影響渲染速度。例 6 class 用於指定樣式規則,其屬性值是樣式規則中類選擇器名 樣式類名 的集合,樣式類名不需要帶上.樣式類名之間用空格分隔。關於f...