前端底層 offsetLeft

2022-09-05 11:54:13 字數 1848 閱讀 6159

div.attributes 是所有標籤屬性構成的資料集合

div.classlist 是所有class名構成的陣列集合

在classlist的原型鏈上看以看到add()和remove()

class的方法:

div.classname()方法 刪除所有class名 替換乙個或多個名字

div.chasslist.add()方法 往class裡面新增乙個名字

div.classlist.remove()方法 刪除乙個class名字

clientwidth/clientheight 是我們設定的寬和高+內邊距 沒有邊框

clientleft/clienttop 就是我們設定的邊框值

offsetwidth/offsetheight 是我們設定的寬和高加上 內邊距 和 邊框

offsetleft/offsettop 是元素外邊距離副局內邊距的距離

↑↑↑參照物由父級身上的position:absolute/fixed決定 如果父級元素沒有就逐層查詢 直到body

offsetparent 返回這個元素的父級元素

1)offset往往和我們做元素的運動有關

2)offset必須和position使用

scrollwidth/scrollheight 就是我們設定的寬高加上內邊距(內容沒有溢位的前提下)

如果超出了範圍就按內容而定

scrolltop/scrollleft   滾動條卷走的高度和寬度

如果我們設定了小數,都會向上取整

document.body 獲取的是文件中的body標籤

document.documentelement 獲取的是文件中根節點 就是整個html

document.body.clientwidth

document.documentelementwidth

二者獲取的width的值不一樣差16px

ie6 不支援document.documentelement

寫法:var w=document.documentelement.clientwidth || document.body.clientwidth

獲取瀏覽器可見區的寬度

offset 往往和我們做元素的運動有關

offset必須和position配合使用往往這個值還必須是absolute。

offsetleft 有初始值 在標準瀏覽器下是8px  低版本沒有

document.body 獲取的是文件中的body標籤

document.documentelement  獲取的是文件中根節點

二者獲取的width的值不一樣差16px,怎樣讓他們一樣

乙個css就搞定了

offsetLeft和offsetTop怎麼用

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

JS執行的底層機制 web前端高階學習

在js中物件的屬性名是什麼格式的?普通物件的屬性名只能是 字串 普通物件的屬性名可以是基本資料型別值 但是普通物件的屬性名不能是物件,如果是物件,需要轉換為字串儲存 map 這種資料結構支援 物件作為屬性名 物件作為屬性名會tostring轉換為字串 object object 普通物件tostri...

mysql 底層引擎 mysql底層簡述

mysql 日誌系統 1 redo日誌 基於innodb引擎 redo log通常是物理日誌,記錄的是資料頁的物理修改,而不是某一行或者某幾行的修改,用來恢復提交後的物理資料頁。redo log使用wal write ahead logging 技術,每次提交事務後,都會講儲存引擎中的log buf...