当存在后代类时，将类添加到父类

Question

我需要根据后代何时具有特定类动态地向元素添加样式。我知道这只能用javascript来完成，这不是我的部门。

尽管我一直在寻找一些复制粘贴解决方案，但我现在求助于创建此线程，因为我觉得此处列出的许多答案可能已经过时并且专注于兼容性。

我不是这方面的专家，但我读到这可以很容易地在现代浏览器上完成，而无需使用 jquery，我只需要它在现代浏览器上工作。

<ul class="the-parent">
<li class="the-descendant"></li>
</ul>

发生的情况是，Wordpress 插件在与菜单交互时将"打开"的类添加/删除为"后代"的类，但没有为我提供基于此交互设置父级样式的方法。

Answer 1

对于我从您的问题中读到的内容，您需要在子节点上设置一个MutationObserver，然后观察class属性的属性更改：

// Get a reference to the Node you need to observe classList changes on
const targetNode = document.querySelector('.child');
// Set up the configuration for the MutationObserver
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
const config = { 
attributes: true, 
attributeFilter: ['class'],
};
// Callback function to execute when mutations are observed
const callback = (mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
mutation
.target
.closest('.parent')
.classList
.toggle('orange');
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
// observer.disconnect();

.parent {
background-color: grey;
color: white;
padding: 30px;
}
.parent.orange {
background-color: orange;
}
.child {
background-color: white;
color: black;
padding: 20px;
}
.parent::after,
.child::after {
content: '"'attr(class)'"';
}

<div class="parent">
<div class="child" onclick="this.classList.toggle('clicked');">child css class: </div>
parent css class: 
</div>

请记住，当您不再需要观察器时，断开观察器的连接非常重要，否则即使从 DOM 中删除观察到的节点，它也会保持活动状态。