clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight All In One

clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight All In One

MDN

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

clientHeight & clientWidth

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

offsetHeight & offsetWidth

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

---

var clientHeight = document.getElementById('myDiv').clientHeight;

// or

var offsetHeight = document.getElementById('myDiv').offsetHeight;

---

outerWidth & innerWidth & outerWidth & outerHeight

window 1366x768

// 屏幕宽高
window.outerWidth;
// 1366
window.outerHeight;
// 728 === 768 - 40

// 实际宽高
window.innerWidth;
// 974 / 1366
window.innerHeight;
// 657 / 270


document.documentElement.clientWidth;
// 957 / 1349
document.documentElement.clientHeight;
// 657 / 270
document.documentElement.scrollHeight;
// 4482 / 2893


document.body.clientHeight;
document.body.offsetHeight;
document.body.scrollHeight;
// 4638 / 3485

document.body.clientWidth;
document.body.offsetWidth;
document.body.scrollWidth;
// 957 / 1349

var body = document.body,
    html = document.documentElement;

var height = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
);

screen.height && screen.width

https://www.cnblogs.com/xgqfrms/p/10362497.html

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---