Размеры элемента: offset, client, scroll

Самая внешняя мерка. offsetWidth — это вся видимая коробка элемента: содержимое, внутренние отступы padding и рамки border. Ровно то, что вы обвели бы пальцем по краю блока. offsetHeight — то же самое по вертикали.

Это число, а не строка: браузер уже всё посчитал и округлил до целых пикселей. Считать ничего не надо, читать можно сразу.

const card = document.getElementById("card");
card.style.cssText = "box-sizing: content-box; width: 200px; padding: 10px; border: 5px solid gray;";

console.log(card.offsetWidth - 200);
console.log(typeof card.offsetWidth);

box-sizing: content-box в примере стоит явно, как и в остальных примерах статьи с рамками и отступами. Песочница учебника, как многие сбросы стилей, ставит всем элементам border-box, а при нём width: 200px — уже вся коробка вместе с padding и рамками, и разница вышла бы нулевой. Чем две модели отличаются, разобрано в прологе: что входит в width при content-box и border-box.

Внешние отступы margin в offset не входят: он про сам блок, а не про воздух вокруг него. Так что «место, которое элемент занимает в раскладке» и offsetWidth — не одно и то же.

clientWidth и clientHeight меряют внутреннюю область — содержимое плюс padding, но без рамок. Это ответ на вопрос «сколько места есть внутри блока», а не «сколько блок занимает снаружи».

const pad = document.getElementById("pad");
pad.style.cssText = "box-sizing: content-box; width: 150px; padding: 10px; border: 5px solid gray;";

console.log(pad.clientWidth - 150);
console.log(pad.offsetWidth - pad.clientWidth);
console.log(pad.clientTop);

Есть второй вычитаемый: полоса прокрутки. Она рисуется внутри рамок и отнимает место у содержимого, поэтому offsetWidth - clientWidth — это не всегда только рамки. Насколько толстая полоса, зависит не от браузера, а от системы и её настроек: в Windows она обычно съедает около пятнадцати пикселей, в macOS с накладными полосами — ничего, а в той же macOS, где полосы велено показывать всегда, снова те же пятнадцать. Именно поэтому её ширину считают на живом элементе, а не хранят константой.

scrollWidth и scrollHeight отвечают на вопрос «сколько там содержимого целиком» — вместе с той частью, что не поместилась. Если всё влезает, scroll-размеры совпадают с client; как только появился излишек, scroll становится больше.

const feed = document.getElementById("feed");
feed.style.cssText = "height: 50px; overflow: auto;";

console.log(feed.scrollHeight > feed.clientHeight);

feed.scrollTop = feed.scrollHeight; // просим прокрутить дальше, чем можно
console.log(feed.scrollTop > 0);
console.log(Math.abs(feed.scrollHeight - feed.scrollTop - feed.clientHeight) < 2);

Последняя строка — рабочий рецепт «докрутили до низа». Допуск в пару пикселей нужен потому, что scrollTop бывает дробным, а scrollHeight округляется: точное равенство иногда не срабатывает на масштабе страницы, отличном от ста процентов.

const css = "width: 200px; overflow: hidden; white-space: nowrap;";
const fits = document.getElementById("fits");
const cut = document.getElementById("cut");
fits.style.cssText = css;
cut.style.cssText = css;

// честный детектор обрезанного текста
console.log(fits.scrollWidth > fits.clientWidth);
console.log(cut.scrollWidth > cut.clientWidth);

Запоминается проще всего через то, что во что входит.

const panel = document.getElementById("panel");
panel.style.cssText = "box-sizing: content-box; width: 150px; height: 40px; padding: 10px; border: 5px solid gray; overflow: auto;";

console.log(panel.offsetHeight - panel.clientHeight);
console.log(panel.clientHeight - 40);
console.log(panel.scrollHeight > panel.clientHeight);

offset — снаружи, client — внутри рамок, scroll — вместе с тем, что уехало за край

Соблазн взять ширину из стилей велик, но elem.style.width знает только про инлайновый атрибут style. Ширина, заданная в таблице стилей, туда не попадает — вы получите пустую строку и решите, что ширины нет.

getComputedStyle честнее, но отдаёт строку вроде «120px», которую надо разбирать через parseFloat, и описывает CSS-модель, а не итоговую коробку: рамки, padding и полоса прокрутки в это число не входят, а box-sizing меняет его смысл. Плюс у элемента, который не отрисован (display: none), вместо пикселей может прийти auto или проценты.

const w = document.getElementById("w");
w.style.cssText = "box-sizing: content-box; width: 120px; padding: 10px; border: 5px solid gray;";

console.log(w.style.height);
console.log(typeof getComputedStyle(w).width);
console.log(parseFloat(getComputedStyle(w).width) < w.offsetWidth);

Геометрические свойства смотрят на результат, который браузер уже разложил: шрифты, переносы строк, соседей, появившуюся полосу прокрутки. Правило простое: CSS — чтобы задавать, offset/client/scroll — чтобы измерять.

const tr = document.getElementById("tr");
tr.style.cssText = "width: 100px; height: 50px; transform: scale(2);";

console.log(tr.offsetWidth);
console.log(tr.getBoundingClientRect().width);

Все геометрические свойства скрытого элемента равны нулю. Не «примерно», не «как было в прошлый раз» — ровно 0. То же самое у элемента, который ещё не вставлен в документ: пока браузер его не разложил, мерить нечего.

const hero = document.getElementById("hero");
hero.style.cssText = "width: 120px; height: 40px;";
console.log(hero.offsetWidth > 0);

hero.style.display = "none";
console.log(hero.offsetWidth);
console.log(getComputedStyle(hero).width);

hero.style.display = "";
console.log(hero.offsetWidth > 0);

Обратите внимание на предпоследнюю строку: CSS уверенно называет ширину у элемента, которого на странице нет. Отсюда и самый частый баг — размеры снимают до того, как убрали display: none, получают нули и делят на них. Правильный порядок: сначала показать, потом читать offset/client/scroll — браузер пересчитает раскладку прямо в момент чтения, синхронно.

const ghost = document.getElementById("ghost");
ghost.style.cssText = "width: 120px; height: 40px; visibility: hidden; position: absolute;";

console.log(ghost.offsetHeight);
console.log(ghost.offsetWidth);