InlineStyle

Create an inline CSS style with protection levels.

Diagram

100%Ctrl + wheel to zoom

Constructor

new InlineStyle(styleObject: { [key: string]: string }, protectionLevel?: ProtectionLevel)

Argument	Type	Description
styleObject	{ [key: string]: string }	CSS properties.
protectionLevel	ProtectionLevel	Validation strictness.

Properties

Property	Type	Description
text	string	Inline CSS string.
ansi	string	ANSI sequence representation (when available).

Methods

.generate()

Generates the inline CSS string.

.addStyleWithObject(styleObject: object)

Adds styles from an object. Returns this.

Argument	Type	Description
styleObject	object	CSS properties to merge.

.addStyleWithInlineCSS(inlineCSS: string)

Adds styles from an inline CSS string. Returns this.

Argument	Type	Description
inlineCSS	string	Inline CSS to merge.

.removeStyle(styles: string[] | string)

Removes styles by name. Returns this.

Argument	Type	Description
styles	`string[]	string`

.applyTo(element: HTMLElement)

Applies the style to a DOM element. Returns this.

Argument	Type	Description
element	HTMLElement	Target element.

Example

Recommended to test it in your browser. The test here might not work properly

import { InlineStyle } from "@briklab/lib/stylesheet";
const buttonStyle = new InlineStyle({ backgroundColor: "#111", color: "#fff", padding: "8px 14px" }, "boundary");
buttonStyle.applyTo(document.getElementById("cta"));
console.log(buttonStyle.generate());

import { InlineStyle } from "@briklab/lib/stylesheet"; const buttonStyle = new InlineStyle({ backgroundColor: "#111", color: "#fff", padding: "8px 14px" }, "boundary"); buttonStyle.applyTo(document.getElementById("cta")); console.log(buttonStyle.generate());

Console

No logs yet.