用js修改.htContextMenu:not(.htGhostTable) 样式

在JavaScript中，如果你想动态地修改`:not(.htGhostTable)`选择器的 `.htContextMenu` 类的样式，你需要利用DOM操作和MutationObserver来监听元素的变化。下面是一个简单的示例：

// 获取需要修改样式的所有_htContextMenu元素
const contextMenus = document.querySelectorAll('.htContextMenu:not(.htGhostTable)');

// 定义新的样式对象
const newStyle = {
    backgroundColor: 'blue', // 新背景色
    color: 'white', // 新字体色
    paddingLeft: '20px' // 新内边距
};

// 创建一个新的CSSStyleDeclaration对象
const style = getComputedStyle(contextMenus[0]);

// 将新样式添加到每个元素的style对象上
contextMenus.forEach(menu => {
    menu.style.cssText = Object.entries(newStyle)
        .map(([property, value]) => `${property}: ${value};`)
        .join('');
});

function getComputedStyle(element) {
    return window.getComputedStyle(element);
}

// 使用MutationObserver来监听元素变化，这里假设htGhostTable类会改变状态
const observer = new MutationObserver(mutationsList => {
    mutationsList.forEach(mutationRecord => {
        mutationRecord.addedNodes.forEach(node => {
            if (node.classList.contains('htGhostTable')) {
                // 当.htGhostTable类被添加时，移除之前的样式更改
                contextMenus.forEach(menu => {
                    menu.style.cssText = style.cssText;
                });
            }
        });
    });
});

observer.observe(document.body, { attributes: true, childList: true, subtree: true });

以上代码会在`.htGhostTable`类被添加到某个`.htContextMenu`元素时，恢复原始样式。