Javascript DOM检测元素样式更改(没有JQUERY)

// 获取元素的初始样式
const element = document.getElementById('myElement');
const initialStyle = window.getComputedStyle(element);

// 创建一个MutationObserver实例来监听样式变化
const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const currentStyle = window.getComputedStyle(element);
            console.log('样式已更改:', initialStyle, '->', currentStyle);
        }
    }
});

// 配置观察选项
const config = { attributes: true, attributeFilter: ['style'] };

// 开始观察目标节点
observer.observe(element, config);

const element = document.getElementById('myElement');

element.addEventListener('transitionend', (event) => {
    console.log('CSS过渡结束');
});

element.addEventListener('animationend', (event) => {
    console.log('CSS动画结束');
});

const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && (mutation.attributeName === 'style' || mutation.attributeName === 'class')) {
            console.log('样式或类已更改');
        }
    }
});

element.style.transition = 'all 1s';
element.style.animation = 'myAnimation 1s';

element.addEventListener('transitionend', (event) => {
    console.log('CSS过渡结束');
});

element.addEventListener('animationend', (event) => {
    console.log('CSS动画结束');
});