js如何监听css属性变化

利用MutationObserver、监听属性变化、利用getComputedStyle

JavaScript监听CSS属性变化是一项重要技能，尤其在构建动态、响应式网页时。利用MutationObserver监听DOM变化是其中一种常用方法，这种方法不仅适用于CSS属性，还适用于DOM结构的变化。MutationObserver是一个强大的工具，它能监控DOM树中的变化，并在变化发生时触发回调函数。我们可以利用它来监听CSS属性的变化。

MutationObserver是一个JavaScript API，它提供了监视DOM树变化的能力。通过MutationObserver，我们可以监听节点的属性变化、子节点的添加或删除等。以下是一个基本的使用示例：

const targetNode = document.getElementById('myElement');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'attributes') {
            console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

在上述代码中，我们首先获取了我们想要监听的DOM节点，然后定义了一个配置对象，指明我们要监听节点的哪些变化。最后，我们创建了一个MutationObserver实例，并开始监听目标节点。

一、利用MutationObserver监听CSS属性变化

MutationObserver的一个重要特性是它可以监听DOM节点的属性变化。这对于监听CSS属性的变化非常有用，因为大多数CSS属性都是通过元素的style属性来设置的。

1、基本用法

如前所述，我们可以使用MutationObserver来监听元素的属性变化。以下是一个具体的示例：

const targetNode = document.getElementById('myElement');
const config = { attributes: true, attributeFilter: ['style'] };
const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            console.log(`The style attribute was modified.`);
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

在这个示例中，我们通过设置attributeFilter来只监听style属性的变化。当style属性发生变化时，回调函数会被调用，并输出相应的信息。

2、监听特定CSS属性的变化

有时我们可能只关心特定的CSS属性是否发生了变化。例如，我们只关心元素的color属性是否发生了变化。我们可以在回调函数中进一步检查具体的CSS属性：

const targetNode = document.getElementById('myElement');
const config = { attributes: true, attributeFilter: ['style'] };
const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const newColor = window.getComputedStyle(targetNode).color;
            console.log(`The color property was modified. New value: ${newColor}`);
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

在这个示例中，当style属性发生变化时，我们使用window.getComputedStyle来获取元素的最新样式，并检查color属性的值。

二、利用CSS变量和CustomEvent

除了使用MutationObserver，我们还可以通过使用CSS变量和CustomEvent来监听CSS属性的变化。这种方法的优点是它更灵活，可以更容易地传递额外的信息。

1、定义CSS变量

首先，我们需要定义一个CSS变量，并在样式中使用它：

:root {
    --my-color: blue;
}
#myElement {
    color: var(--my-color);
}

在这个示例中，我们定义了一个CSS变量--my-color，并将其应用于元素的color属性。

2、监听CSS变量的变化

然后，我们可以使用JavaScript来监听CSS变量的变化，并触发自定义事件：

const targetNode = document.getElementById('myElement');
const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const newColor = window.getComputedStyle(targetNode).getPropertyValue('--my-color');
            const event = new CustomEvent('colorChange', { detail: { newColor } });
            targetNode.dispatchEvent(event);
        }
    });
});
observer.observe(targetNode, { attributes: true, attributeFilter: ['style'] });
targetNode.addEventListener('colorChange', (event) => {
    console.log(`The color property was modified. New value: ${event.detail.newColor}`);
});

在这个示例中，我们首先使用MutationObserver来监听style属性的变化。当style属性发生变化时，我们使用window.getComputedStyle来获取新的CSS变量值，并触发一个自定义事件colorChange。然后，我们可以通过监听这个自定义事件来获取CSS变量的新值。

三、利用getComputedStyle

除了使用MutationObserver和CustomEvent外，我们还可以直接使用getComputedStyle来检查元素的当前样式。这种方法适用于需要周期性检查样式变化的情况。

1、定期检查样式变化

我们可以使用setInterval函数来定期检查元素的样式变化：

const targetNode = document.getElementById('myElement');
let lastColor = window.getComputedStyle(targetNode).color;
setInterval(() => {
    const currentColor = window.getComputedStyle(targetNode).color;
    if (currentColor !== lastColor) {
        console.log(`The color property was modified. New value: ${currentColor}`);
        lastColor = currentColor;
    }
}, 1000);

在这个示例中，我们使用setInterval函数每秒检查一次元素的color属性。如果属性值发生了变化，我们会输出相应的信息，并更新lastColor变量。

2、优化性能

定期检查样式变化可能会对性能产生影响，特别是在大量元素需要监控的情况下。我们可以通过减少检查频率或优化代码逻辑来降低性能开销。例如，我们可以使用requestAnimationFrame来代替setInterval，从而在浏览器下一次重绘之前检查样式变化：

const targetNode = document.getElementById('myElement');
let lastColor = window.getComputedStyle(targetNode).color;
function checkStyleChanges() {
    const currentColor = window.getComputedStyle(targetNode).color;
    if (currentColor !== lastColor) {
        console.log(`The color property was modified. New value: ${currentColor}`);
        lastColor = currentColor;
    }
    requestAnimationFrame(checkStyleChanges);
}
requestAnimationFrame(checkStyleChanges);

在这个示例中，我们使用requestAnimationFrame函数来代替setInterval，从而在浏览器下一次重绘之前检查样式变化。这种方法可以更高效地利用浏览器的渲染周期，从而降低性能开销。

四、实际应用场景

在实际开发中，监听CSS属性变化可以应用于多种场景。例如，我们可以在用户调整窗口大小时动态调整元素的样式，或者在用户交互时实时更新页面的布局。

1、响应式设计

在响应式设计中，我们可以通过监听窗口的resize事件来动态调整元素的样式：

window.addEventListener('resize', () => {
    const targetNode = document.getElementById('myElement');
    if (window.innerWidth < 600) {
        targetNode.style.color = 'red';
    } else {
        targetNode.style.color = 'blue';
    }
});

在这个示例中，我们监听窗口的resize事件，并根据窗口的宽度动态调整元素的color属性。

2、用户交互

在用户交互时，我们可以通过监听元素的click事件来实时更新页面的布局：

const targetNode = document.getElementById('myElement');
targetNode.addEventListener('click', () => {
    targetNode.style.color = targetNode.style.color === 'red' ? 'blue' : 'red';
});

在这个示例中，我们监听元素的click事件，并在每次点击时切换元素的color属性。

五、总结

监听CSS属性变化是前端开发中常见的需求，通过使用MutationObserver、CSS变量和CustomEvent、getComputedStyle等方法，我们可以高效地实现这一目标。在实际开发中，选择合适的方法并优化代码性能是关键。

研发项目管理系统PingCode和通用项目协作软件Worktile是两个非常优秀的项目管理工具，可以帮助团队更高效地协作和管理项目。在使用这些工具时，我们可以结合CSS属性变化的监听技术，为用户提供更好的交互体验和响应式设计。