vanillajs-browser-helpers/boxModel.mjs

Collection of convenience code snippets (helpers) that aims to make it a little easier to work with vanilla JS in the browser

const num = (n) => parseInt(n, 10);
/**
 * Parses the box model numbers of an given Element (margin, padding and border widths)
 *
 * @param elm - The element to parse numbers from
 * @returns The mapping of the box model
 *
 * @example
 *
 * ```ts
 * boxModel(someDiv);
 * ```
 */
export default function boxModel(elm) {
    const style = window.getComputedStyle(elm);
    return {
        margin: {
            top: num(style.marginTop),
            left: num(style.marginLeft),
            bottom: num(style.marginBottom),
            right: num(style.marginRight)
        },
        padding: {
            top: num(style.paddingTop),
            left: num(style.paddingLeft),
            bottom: num(style.paddingBottom),
            right: num(style.paddingRight)
        },
        border: {
            top: num(style.borderTopWidth),
            left: num(style.borderLeftWidth),
            bottom: num(style.borderBottomWidth),
            right: num(style.borderRightWidth)
        }
    };
}