JavaScript

Determine the dimensions of elements

clientWidth, clientHeight

The size of the displayed content, including padding, without scrollbars and borders.

scrollWidth, scrollHeight

The actual size of the content, regardless of how much of it is currently visible.

offsetWith, offsetHeight

The width and height of an element, including borders, without margins. Ignores scaling.

getBoundingClientRect()

Returns an object with the left=x, top=y, right, bottom, width, and height properties of an element, including borders, without margins. Considers scaling, returns the rendered size.

See also: MDN, Determining the dimensions of elements

Dynamically add an element

const element = document.createElement("div")
element.appendChild(document.createTextNode("Loram Ipsum"))
context.appendChild(element)

Read CSS variables

window.getComputedStyle(document.documentElement).getPropertyValue('--css-variable')