@codebundlesbyvik/css-operations v1.0.1

css-operations

JavaScript helper functions for various CSS operations.

Installation

// Install package from npm
npm install @codebundlesbyvik/css-operations

// Import the functions you need
import { getPropValue, motionAllowed } from "@codebundlesbyvik/css-operations";

// ... or, import the module in its entirety
import * as cssOps from "@codebundlesbyvik/css-operations";

Functions

• getPropValue
• getUnit
• motionAllowed
• timeToMs

getPropValue(el, prop)

Retrieve an element's CSS property value.

If the given property is not set, null will be returned.

Parameters

* indicates required

• * el (Element): Target Element.
• * prop (String): Property to retrieve.

Example

const el = document.querySelector("#example-div-1");
// margin-bottom: 0.75rem;
// background-color: black;

getPropValue(el, "margin-bottom");
// > "0.75rem"

getPropValue(el, "background-color");
// > "black"

getPropValue(el, "non-existant");
// > ""

getUnit(value)

Retrieve the unit of a quantitative CSS value.

If the given value has no unit, null will be returned.

Parameters

• value (String): CSS value to get the unit from.

Example

getUnit("2px")
// > "px"

getUnit(".5ms")
// > "ms"

getUnit("100")
// > null

motionAllowed()

Check prefers-reduced-motion. Returns a Boolean based on the result.

Parameters

• None

Example

// prefers-reduced-motion: no-preference OR unsupported
motionAllowed()
// > true

// prefers-reduced-motion: reduce
motionAllowed()
// > false

timeToMs(time)

Convert CSS-style "unit-based time" value to a Number of milliseconds.

If the given value is unitless, it'll be returned as-is. If it has an unrecognized unit, the returned value will be null.

Parameters

• time (String): CSS-style time duration (i.e. 10s, 5h, 0.5d).

Recognized units

• ms: Milliseconds
• s: Seconds
• h: Hours
• d: Days
• w: Weeks
• y: Years - assumes 1 year = 365 days

Example

timeToMs("2s")
// > 2000

timeToMs("0.25d")
// > 21600000

timeToMs("-1w")
// > -604800000

timeToMs("1asdf")
// > null

timeToMs("20")
// > 20

License

MIT © Viktor Chin-Kon-Sung