js 常用 DOM 元素寬高

2022-03-03 09:58:02 字數 2652 閱讀 5935

1、視口大小(不包括滾動條,視口字面理解當然是不包括滾動條),

document.documentelement.clientwidth

document.documentelement.clientheight

即使給 html 元素顯示設定了寬高,返回的值也仍然是視口的尺寸,這是非常特殊的,跟普通 ele.clientwidth 含義不同。

通常情況下,ele.clientwidth 指的是 ele,作為包含塊,給於內部元素的乙個視口,ele 的尺寸和 clienwidth 是相關的,詳情戳clientwidth

按照這個邏輯,我們應該計算 html 的包含塊,也就是初始包含塊的 clientwidth,但是似乎沒有接觸初始包含塊的介面,僅僅知道,在桌面端,他的尺寸和視口一致;

所以當我們設定 

html

其實,是將 html 的寬高設定為初始包含塊的寬高,等於視口的寬高。

關於 body 的這個屬性,如果消除了預設的 margin ,則和上方是相等的:

document.body.clientwidth

document.body.clientheight

但是如果給 body 顯示設定了寬高,返回的就不一定是視口的寬高了,這是普通元素的特性。

另外,瀏覽器視窗大小(瀏覽器視窗,自然是包括滾動條的):

window.innerwidth

window.innerheight

螢幕大小(裝置畫素,不常用,其實就是解析度),即使瀏覽器縮小了,這個值也不會變,是螢幕。

screen.width

screen.height

2、文件大小(包含了超出文件的溢位部分)

document.documentelement.scrollheight

document.documentelement.scrollwidth

文件大小(不包含超出文件的溢位部分,如果 overflow:hidden,那麼和上面的是一致的,但這個屬性耗效能)

document.documentelement.offsetheight

document.documentelement.offsetwidth

3、文件滾動的大小

相容移動端需要用:

window.pagexoffset

window.pageyoffset

別名 scrollx / scrolly ,ie 不相容別名,相容 pagexoffset / pageyoffset,但是 ie9 之前的兩個都不相容;

另一種常用的寫法:

document.documentelement.scrolltop;

document.documentelement.scrollleft;

可寫可讀,缺點是不相容移動端;

4、元素相對於視口的位置

ele.getboundingclientrect(); //包含4 個屬性:left、top、right 和bottom

5、元素的大小(border-box,不包含溢位部分,包括溢位的用 )

ele.offsetwidth;

ele.offsetheight;

元素的大小(border-box 包括溢位的部分,如果溢位隱藏,和上面值一致 )

ele.scrollwidth;

ele.scrollheight;

6、元素滾動的大小,(應該是相對於包含塊) 可寫(當然包含塊要處於溢位狀態才行)

ele.scrolltop;

ele.scrollleft;

html.scrolltop 相對於初始包含塊,所以上文 html.scrolltop 計算文件相對於視口的偏移就是這個道理

7、元素相對於文件的位置(貌似沒有原生的 api,推算就是,相對於視口的偏移 + 文件相當於視口的滾動)

ele.getboundingclientrect().top+document.documentelement.scrolltop;

ele.getboundingclientrect().left+document.documentelement.scrollleft;

8、計算滾動條的寬度

function

getscrollbarwidth() ,

i, scrollbarwidth;

for (i in styles) ;

scrollbarwidth = para.offsetwidth -para.clientwidth;

document.body.removechild(para);

return

scrollbarwidth;

}

js 常用 DOM 元素寬高

1 視口大小 不包括滾動條,視口字面理解當然是不包括滾動條 document.documentelement.clientwidth document.documentelement.clientheight 即使給 html 元素顯示設定了寬高,返回的值也仍然是視口的尺寸,這是非常特殊的,跟普通 ...

js怎麼獲取元素的寬高

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

js獲取元素實際精確寬高

解決方法1 window.getcomputedstyle 使用方法 window.getcomputedstyle element 這個方法是js裡提供元素屬性最全的方法,裡面包含幾百個屬性,我們把它在控制台列印出來console.log window.getcomputedstyle docum...