检查页面加载后添加的内联样式以运行功能吗？

如何解决检查页面加载后添加的内联样式以运行功能吗？

我有一个网站功能，在日期上添加破折号。它在加载时运行。不幸的是，它运行于一个提交的应用程序中，如果不满足X条件（在这种情况下，日期必须是至少2年的跨度），则另一个字段显示以前为以前的工作记录隐藏了要添加。

问题是，当该字段显示我在页面加载时声明的函数时，不适用于此函数。但是，通过检查代码，我注意到为元素style="display: block"添加了一个内联样式。但是，它仅使用类employment-form loan-form hide-并隐藏仍然显示。完整的：

<div class="employment-form loan-form hide " style="display: block;">

以前，style="display: block"不显示。

我正在尝试解决此功能的局限性，因为我的工作为此使用了一个供应商，并且实际上已经被淘汰了，因此在我们准备转移到另一个供应商时，他们不再支持它。

有没有一种方法可以使用jQuery来检查元素是否已添加内联样式，如果确实如此，则运行函数？

解决方法

您可以使用mutation observer来监视对style属性的更改，然后在其样式更改为display: block时采取措施。

要创建观察者：

const observer = new MutationObserver(records => {
    // your logic here
});

然后将其连接起来并观察元素的属性更改：

const element = $("employment-form.loan-form.hide")[0]; // [0] to get the raw element
observer.observe(element,{
    attributes: true
});

请注意，您不需要jQuery，您可以使用querySelector来获取元素：

const element = document.querySelector("employment-form.loan-form.hide");

此时，更改元素上的任何属性将触发您的回调。

例如：

const element = $("employment-form.loan-form.hide")[0]; // [0] to get the raw element
const observer = new MutationObserver(records => {
    if (element.style.display === "block") {
        // It has the block style now
    }
});
observer.observe(element,{
    attributes: true
});

当您不再需要观看它时，请在观察者上呼叫disconnect。

observer.disconnect();