如何覆蓋異步CSS？

Question

我正在使用一種SaaS進行潛在客戶查找。 我粘貼他們的代碼，就像將Google Analytics（分析）代碼粘貼到頁面頂部一樣（例如）：

<script type="text/javascript">
    var _lfuid = 'xxxxxxxxxxxxx';

    (function (d) {
        var w = d.createElement('script');
        w.type = 'text/javascript';
        w.asynch = true;
        w.src = '//widget.website.come/widget/widget.js';
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(w, s);
    })(document);
</script>

但是，我從調用中收到的小部件位置是在我得到響應的css文件中設置的。 所有的類都有!important標記，因此我無法使用我在靜態文件中定義的css類覆蓋它。

我的問題是：如何覆蓋此ansych CSS？

Answer 1

您需要將事件偵聽器添加到異步腳本的加載中，並使用！important規則將CSS附加到HEAD之后。 例

var _lfuid = 'xxxxxxxxxxxxx';

(function (d) {
    var w = d.createElement('script');
    w.type = 'text/javascript';
    w.asynch = true;
    w.src = '//widget.website.come/widget/widget.js';
    w.addEventListener('load', function (e) { 
       /* We wait the load of the async script and after we use jQuery to append our CSS to the HEAD of the document.
          p.s.: you need jQuery to use the dollar sing selector ($)  */
        $('head').append('<style> #yourCSSgoHere { display: none !important; }</style>');
    }, false);
    var s = d.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(w, s);
})(document);