如何覆盖异步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);