原生JS獲取dom元素高度

2021-09-26 10:06:57 字數 894 閱讀 9943

clientheight,scrollwidth,offsetwidth的區別

用body 測試

網頁實際寬: document.body.clientwidth

網頁實際高: document.body.clientheight

網頁實際寬: document.body.offsetwidth (包括邊線的寬)

網頁實際高: document.body.offsetheight (包括邊線的高)

網頁正文全文寬: document.body.scrollwidth

網頁正文全文高: document.body.scrollheight

網頁被滑去的高: document.body.scrolltop

網頁被滑去的左: document.body.scrollleft

dom元素div

元素的實際高度:document.getelementbyid(「div」).offsetheight

元素的實際寬度:document.getelementbyid(「div」).offsetwidth

元素的實際距離左邊界的距離:document.getelementbyid(「div」).offsetleft

元素的實際距離上邊界的距離:document.getelementbyid(「div」).offsettop

區別

clientheight:元素客戶區的大小,指的是元素內容及其邊框所佔據的空間大小(經過實踐取出來的大多是視口大小)

scrollheight: 滾動大小,指的是包含滾動內容的元素大小(元素內容的總高度)

offsetheight: 偏移量,包含元素在螢幕上所用的所有可見空間(包括所有的內邊距滾動條和邊框大小,不包括外邊距

原生JS獲取DOM元素的方法

js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...

原生js獲取Html元素的實際寬度高度

第一種情況就是寬高都寫在樣式表裡,就比如 div1。這中情況通過 div1.style.width拿不到寬度,而通過 div1.offsetwidth才可以獲取到寬度。第二種情況就是寬和高是寫在行內中,比如style width 120px 這中情況通過上述2個方法都能拿到寬度。小結,因為id.of...

JS 獲取dom元素

box class one name bbb style width 100px height 100px background color pink div1div box1 class one div1div box2 class one div1div 通過 id來獲取元素 var box d...