使用jQuery更改添加到DOM中的元素的CSS

我正在尝试使用jQuery来更改jQuery Validation插件的错误标签的CSS属性。使用jQuery更改添加到DOM中的元素的CSS

这基本上是因为我使用jQuery公式来创建响应字体大小，而不是通过CSS本机vw或em单位。通常精美的作品。

但是，因为标签最初并不在DOM中，所以我无法使用$(document).ready(function)作为目标：尽管它适用于$(window).resize(function)。

那么我应该使用什么函数来将元素加载到DOM中进行更改？

2016-08-02 JohnG

如果它们是通过ajax加载的，则可以在ajax调用完成时触发该公式。 – Polyov

据我所知，Jquery验证使用AJAX命中服务器并返回数据是否有效的响应。在这种情况下，您需要在块中包含$ .ajaxComplete（function（）和您的代码，以便将已添加到DOM的元素作为目标，请在此处查看文档：http://api.jquery.com/ajaxcomplete/ –

如果你有一个计算大小的jQuery函数，你将不得不插入你的元素并在其上运行该函数......可能你需要重构它，所以你可以传递这些元素，但是比在所有DOM上运行它或比较每个元素的状态更好......也可以尝试类似__ [shadow DOM]（http://webcomponents.org/polyfills/shadow-dom/）__ –

那么，也许突变观察员可以帮助？发现了这些好东西之前，我开始用角几个月前，这里有一个职位，可以帮助

Detect changes in the DOM

--amend 观看父元素，检查添加的元素是一个人的你正在寻找。

来源

2016-08-02 21:38:52

您应该使用MutationObserver API，只要指定元素的DOM发生更改就会触发侦听器函数，因此您可以确保元素具有正确的CSS，而不会触发resize事件。

下面是一些例子：

$(document).ready(function() { 
    var observer = new MutationObserver(function (mutations) { 
     var elements = mutations.reduce(function (elements, mutation) { 
      return elements.concat(mutation.addedNodes); 
     }, []); 

     // .filter() makes sure you only manipulate mutated elements that match your selector 
     resizeFonts($(elements).filter(".selector")); 
    }); 
    observer.observe($(".parent-element")[ 0 ], { 
     childList: true, 
     subtree: true 
    }); 

    $(window).resize(function() { 
     resizeFonts($(".selector")); 
    }); 
}); 

function resizeFonts (elements) { 
    elements.css("font-size", amazingNewFontSize); 
}

请注意，但是，MutationObservers may not work in all browsers。
我根据我的示例this answer，其中包括进一步的代码，使其在旧版浏览器中工作。

来源

2016-08-03 00:31:34 gustavohenke

谢谢大家。最后，我使用了HES_Xenon链接到上面的MutationObserver讨论中的一些内容：基于MutationObserver的jQuery Initialise插件 - 基本上是因为它使用的代码较少。

来源

2016-08-03 12:21:10 JohnG

使用jQuery更改添加到DOM中的元素的CSS

回答

相关问题