Javascript DOM检测元素样式更改(没有JQUERY)_HTML检测元素样式更改_使用Javascript dom而不是jQuery元素选择器(没有jQuery) - 腾讯云开发者社区

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

基础概念

JavaScript DOM（Document Object Model）是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM将文档解析成一个由节点和对象组成的结构，这样编程语言就可以与页面交互。

检测元素样式更改

在没有使用jQuery的情况下，可以通过以下几种方法来检测元素的样式更改：

1. 使用 `getComputedStyle` 和 `MutationObserver`

getComputedStyle 方法可以获取元素当前的计算样式，而 MutationObserver 可以监视DOM的变化。

// 获取元素的初始样式
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);

2. 使用 `addEventListener` 监听 `transitionend` 或 `animationend` 事件

如果元素的样式变化是通过CSS过渡或动画实现的，可以监听这些事件。

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

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

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

应用场景

动态UI更新：在用户交互或数据变化时，实时更新页面元素的样式。
性能监控：跟踪样式变化以优化页面渲染性能。
交互反馈：在样式变化后提供视觉或听觉反馈。

可能遇到的问题及解决方法

问题：`MutationObserver` 没有触发

原因：可能是由于配置不正确，或者样式变化不是通过修改 style 属性实现的。

解决方法：确保 MutationObserver 配置正确，并且样式变化是通过修改 style 属性实现的。如果样式变化是通过CSS类切换实现的，可以考虑监听 class 属性的变化。

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

问题：`transitionend` 或 `animationend` 事件没有触发

原因：可能是由于事件监听器没有正确绑定到元素上，或者元素的过渡/动画没有正确设置。

解决方法：确保事件监听器正确绑定，并且元素的CSS过渡或动画属性已正确设置。

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

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

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