Basic Styles

setStyles() applies inline styles using a chainable mutation API.

Style mutations are partial by default, meaning only provided properties are updated while existing styles remain intact.

Important

DOMPP style mutations are additive.

Calling setStyles() again does not reset all styles automatically.

Only provided style properties are updated.

Code

const basicStyles =
  document
    .createElement("div")
    .setAttributes({
      class: "card"
    })
    .setStyles({
      background:
        "#111",
      color:
        "white",
      border:
        "2px solid #333"
    })
    .setText(
      "Styled Element"
    );

app.setChildren(
  basicStyles
);

Notes

setStyles() mutates inline styles directly
style mutations are partial instead of full replacements
setters remain chainable because they return the same native DOM element

Basic Styles

Code

Live Preview