首页js 如何检测DOM树中body.style.fontFamily的变化

js 如何检测DOM树中body.style.fontFamily的变化

时间: 2024-09-11 09:18:59 浏览: 43

在JavaScript中，你可以使用MutationObserver API来检测DOM树中`<body>`元素的`.style.fontFamily`属性的变化。MutationObserver允许你在指定的节点上监听其结构或内容的修改。以下是一个简单的示例： ```javascript // 获取初始字体样式 const initialStyle = window.getComputedStyle(document.body).getPropertyValue('font-family'); // 创建MutationObserver实例 const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'attributes') { // 只关注属性变化 const currentStyle = window.getComputedStyle(document.body).getPropertyValue('font-family'); if (currentStyle !== initialStyle) { console.log('字体家族已改变，新值:', currentStyle); initialStyle = currentStyle; // 更新初始样式 } } }); }); // 观察目标元素（这里是body） observer.observe(document.body, { attributes: true, // 监听属性变化 attributeFilter: ['style'] // 指定只对style属性感兴趣 }); // 当不需要观察时，记得取消观察 // observer.disconnect(); ``` 这个例子会监听`document.body`的`style`属性变化，并在发生变化时打印新的字体家族值。如果你想要在实际应用中监控并触发特定操作，可以在回调函数中添加相应逻辑。

阅读全文