@telemok/calc-dom-element-content-size

calc-dom-element-content-size (beta version)

JS bit addressing DataView+Stack+Queue+Buffer with any types: Uint13, Int53, BigInt61, Float17, LSB/MSB, LE/BE, .set(), .get(), .push(), .pop(), .shift(), .unshift()

Features

• Calculate width and height size of: content, padding, border, margin.
• Calculate with any css "display": "none", "inline", "block", ...
• Calculate with any css "box-sizing": "content-box", "border-box".
• More accuracy, then expression: element.clientWidth - (pl + pr) from https://stackoverflow.com/questions/25197184
• Fast calls: 112K / second. (block and border-box, Ryzen 5500U, Firefox 109 x64)

Schema

Examples:

Available in folder /examples/

1. Basic calculation

<div class="container">
    <div id=div1 style="display: block;box-sizing:border-box;">
        block, border-box
    </div>
</div>
<script type="module">
    import {calcElementSize} from "./../lib/calc-dom-element-content-size.js"
    //import { calcElementSize } from '@telemok/calc-dom-element-content-size';
    console.log(calcElementSize(div1));
		
</script>
<style>
.container{
	background:green;
	overflow:auto;
	height: 100%;
}
#div1, #div2, #div3{
	width:200px;
	height:100px;
	padding:20px;
	border:#f70 10px solid;
	background-color:#dab;
	outline:#000 2px solid;
	margin:5px;
}
</style>
</html>

2. Result of example1

let result = calcElementSize(element, throwIfDisplayNone = true);
result === {
    "display": "block",
    "boxSizing": "content-box",
    "wP": 40, /* Width of padding */
    "hP": 40, /* Height of padding */
    "wB": 19.2, /* Width of border */
    "hB": 19.2, /* Height of border */
    "wM": 10, /* Width of margin */
    "hM": 10, /* Height of margin */
    "wC": 200, /* Width of content */
    "hC": 100, /* Height of content */
    "wCP": 240, /* Width of content + padding */
    "hCP": 140, /* Height of content + padding */
    "wCPB": 259.2, /* Width of content + padding + border */
    "hCPB": 159.2, /* Height of content + padding + border */
    "wCPBM": 269.2, /* Width of content + padding + border + margin */
    "hCPBM": 169.2, /* Height of content + padding + border + margin */
    /* return more accuracy next 6 lines float instead of integer*/
    "clientWidth": 240, // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
    "clientHeight": 140, // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
    "offsetWidth": 259.2, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
    "offsetHeight": 159.2, // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
    "scrollWidth": 240, // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth
    "scrollHeight": 140 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
}

Source code:

https://npmjs.com/@telemok/calc-dom-element-content-size

Installation #1:

1. Create your Browser or Webview app.
2. Run: npm import @telemok/calc-dom-element-content-size
3. Code: import { calcElementSize } from '@telemok/calc-dom-element-content-size';
4. Code: calcElementSize(youElement)

Installation #2:

1. Create your NodeJs, Browser or Webview app.
2. Code: <SCR(.md bug, del it)IPT type="module">
3. Code: import { calcElementSize } from "https://cdn.jsdelivr.net/npm/@telemok/calc-dom-element-content-size/lib/calc-dom-element-content-size.js";
4. Code: calcElementSize(youElement)

Another libs another authors:

300k/week oldest analog, but don't support display:inline, calc only C and CPBM, no debug functions https://npmjs.com/package/get-size

https://plainjs.com/javascript/styles/getting-width-and-height-of-an-element-23/ https://stackoverflow.com/questions/13435604/getting-an-elements-inner-height https://npmjs.com/package/b-box

300k/week crossbrowser getComputedStyle tested with invisibleIframe too. https://npmjs.com/package/computed-style

Only display:block and content-sizing:border-box? https://npmjs.com/package/element-coordinates