# document size

[🔰 JS](../../../../js) ⟩ [browser](../../..) ⟩ [DOM](../..) ⟩ [types](..) ⟩ [Document]() ⟩ size

{% hint style="success" %}
<mark style="color:purple;">**document size**</mark>

* width: <mark style="color:blue;">`document.documentElement.offsetWidth`</mark>
* height: <mark style="color:blue;">`document.documentElement.offsetHeight`</mark>
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[.offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth), [.offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) will round the value to an <mark style="color:yellow;">**integer**</mark>. If you need a <mark style="color:orange;">**fractional**</mark> value, use [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
{% endhint %}

{% hint style="success" %}
* [.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)/[.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) = content + padding
* [.offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)/[.offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) = contnet + padding + <mark style="color:yellow;">**border**</mark>
* [.scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)/[.scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) = content + padding + <mark style="color:orange;">**overflow**</mark>
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}
```javascript
// document size
const doc = {
    get width() { return document.documentElement.offsetWidth },
    get height() { return document.documentElement.offsetHeight },
};
```
{% endtab %}

{% tab title="👥 相關" %}
* [boxes](../element/boxes "mention")
* [+boxes](../element/+boxes "mention")
* [viewport](../window/viewport "mention") size.
* [padding](../element/+boxes/padding "mention") of [htmlelement](../htmlelement "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [HTML vs Body: How to Set Width and Height for Full Page Size](https://www.freecodecamp.org/news/html-page-width-height/)
{% endtab %}

{% tab title="📘 手冊" %}
* [](<> "mention") ⟩ [.documentElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement) (the \<html> element)
* [border](../element/+boxes/border "mention") of [htmlelement](../htmlelement "mention")
{% endtab %}
{% endtabs %}
