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...