https://github.com/sonofmagic/dom-styler

dom-styler
https://github.com/sonofmagic/dom-styler

Last synced: about 1 month ago
JSON representation

dom-styler

• Host: GitHub
• URL: https://github.com/sonofmagic/dom-styler
• Owner: sonofmagic
• License: mit
• Created: 2022-03-07T07:58:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-15T20:26:31.000Z (11 months ago)
• Last Synced: 2024-08-11T11:16:40.335Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 27.3 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# dom-styler

> dom-styler,manage your dom style easily!

## Usage

```ts

import {

  DomStyler,

  createDocumentElementStyler,

  createDomStyler

} from 'dom-styler'

const manager = new DomStyler(dom)

// same to

const manager1 = createDomStyler(dom)

// default document.documentElement

const docManager = createDocumentElementStyler()

const themeJson = {

  width: '100px',

  height: {

    value: '100vh',

    priority: 'important'

  },

  color: (value, priority) => {

    return {

      value: newValue,

      priority: newPriority

    }

  }

}

// also you can set themeJson as an array

const key = 'custom-theme'

manager.setVariables(themeJson)

manager.setSingleVariable(property, value, priority)

manager.removeProperty(property)

manager.getPropertyValue(property)

manager.saveTheme(themeJson, key)

manager.sync()

```

## APIS

```ts

export declare type VariablesItem = {

  value?: string

  priority?: string

}

export declare type VariablesParamValue =

  | string

  | VariablesItem

  | ((variables: VariablesItem) => VariablesItem)

export declare type VariablesParamMap = Record

export declare type SetVariablesParams = VariablesParamMap[] | VariablesParamMap

export declare class DomStyler {

  root: HTMLElement

  style: CSSStyleDeclaration

  constructor(dom?: HTMLElement)

  private handleParam

  setVariables(param: SetVariablesParams): void

  setSingleVariable(property: string, value?: string, priority?: string): void

  removeProperty(property: string): string

  item(index: number): string

  getPropertyValue(property: string): string

  getPropertyPriority(property: string): string

  sync(cacheKey?: string): any

  saveTheme(theme: Record, cacheKey?: string): void

}

export declare const createDocumentElementStyler: () => DomStyler

export declare const createDomStyler: (dom: HTMLElement) => DomStyler

```