使用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

回答

相關問題