attrs-observer

Observe the DOM property change and injection condition to determine whether to modify the property

Usage no npm install needed!

<script type="module">
  import attrsObserver from 'https://cdn.skypack.dev/attrs-observer';
</script>

README

📦 Installation

npm install attrs-observer

🔨 Usage

import AttrsObserver from 'attrs-observer'

const target = document.querySelector('div')

const observer = new AttrsObserver();

observer.observe(target,
    (target, from, to) => {
        console.log(target, from, to)
        //如果这里返回true 属性就不会设置下去
    },
    (target, from, to) => {
        console.log(target, from, to)
    }
)
//todo 这时候修改 style 或者calss 都会被检查到
observer.unobserve(target)

🖥 API

Class AttrsObserver

Hierarchy

  • AttrsObserver

Index

Constructors

Properties

Methods

Constructors

constructor

Methods

observe

  • observe(target: HTMLElement, preHook: Hook, afterHook: Hook): AttrsObserver

    • Defined in [AttrsObserver.ts:195]

    开始观察

    Parameters

    • target: HTMLElement

      目标对象

    • preHook: Hook

      在样式或者类名改变之前的回调 ps 如果返回 true 那么样式或者类名就不会变

    • afterHook: Hook

      在样式或者类名改变之后的回调

    Returns AttrsObserver

unobserve

  • unobserve(target: HTMLElement): boolean

  • 解除观察

    Parameters

    • target: HTMLElement

      目标对象

    Returns boolean