CSS box model 📦
Get detailed CSS Box Model information about a HTMLElement
This library is useful for when you need to obtain detailed positioning information about an element. Any time you are using Element.getBoundingClientRect()
you might want to consider using css-box-model
instead to get more detailed information.
Usage
import { getBox } from 'css-box-model';
const el: HTMLElement = document.getElementById('foo');
const box: BoxModel = getBox(el);
Installation
yarn add css-box-model
Box type | Composition |
---|
Margin box | margin + border + padding + content |
Border box | border + padding + content |
Padding box | padding + content |
Content box | content |
------------------------------------
| MARGIN | (marginBox)
| ------------------------------ |
| | BORDER | | (borderBox)
| | ------------------------ | |
| | | PADDING | | | (paddingBox)
| | | ------------------ | | |
| | | | CONTENT | | | | (contentBox)
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | ------------------ | | |
| | | | | |
| | ------------------------ | |
| | | |
| ------------------------------ |
| |
| ---------------------------------|
This our returned BoxModel
:
export type BoxModel = {|
marginBox: Rect,
borderBox: Rect,
paddingBox: Rect,
contentBox: Rect,
border: Spacing,
padding: Spacing,
margin: Spacing,
|};
export type Rect = {|
top: number,
right: number,
bottom: number,
left: number,
width: number,
height: number,
x: number,
y: number,
center: Position,
|};
export type Position = {|
x: number,
y: number,
|};
export type Spacing = {
top: number,
right: number,
bottom: number,
left: number,
};
API
getBox
(el: HTMLElement) => BoxModel
Use getBox
to return the box model for an element
withScroll
(original: BoxModel, scroll?: Position = getWindowScroll()) => BoxModel
This is useful if you want to know the box model for an element relative to a page
const el: HTMLElement = document.getElementById('app');
const box: BoxModel = getBox(el);
const withScroll: BoxModel = withScroll(box);
You are welcome to pass in your own scroll
. By default we we use the window scroll:
const getWindowScroll = (): Position => ({
x: window.pageXOffset,
y: window.pageYOffset,
});
calculateBox
(borderBox: AnyRectType, styles: CSSStyleDeclaration) => BoxModel
This will do the box model calculations without needing to read from the DOM. This is useful if you have already got a ClientRect
and CSSStyleDeclaration
as we do not need to recompute it.
const el: HTMLElement = document.getElementById('app');
const borderBox: ClientRect = el.getBoundingClientRect();
const styles: CSSStyleDeclaration = window.getComputedStyles(el);
const box: BoxModel = calculateBox(borderBox, styles);
AnyRectType
allows for simple interoperability with any rect type
type AnyRectType = ClientRect | DOMRect | Rect | Spacing;
createBox
({ borderBox, margin, border, padding }: CreateBoxArgs) => BoxModel
Allows you to create a BoxModel
by passing in a Rect
like shape and optionally your own margin
, border
and or padding
.
type CreateBoxArgs = {|
borderBox: AnyRectType,
margin?: Spacing,
border?: Spacing,
padding?: Spacing,
|};
const borderBox: Spacing = {
top: 10,
right: 100,
left: 20,
bottom: 80,
};
const padding: Spacing = {
top: 10,
right: 20,
left: 20,
bottom: 10,
};
const box: BoxModel = createBox({ borderBox, padding });
getRect
(spacing: AnyRectType) => Rect
Given any Rect
like shape, return a Rect
const spacing: Spacing = {
top: 0,
right: 100,
bottom: 50,
left: 50,
};
const rect: Rect = getRect(spacing);
console.log(rect);