How to overwrite asynch css?

Question

I am using one of the SaaS for lead finding. I paste their code just like I paste google analytics code on top of my page (for example):

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

However, the widgets position that I am receiving from the call, is set in the css file that I get in response. All the classes have !important tag there, so I cannot overwrite it using css classes that I've defined in my static files.

My question is: how can I overwrite this ansych css?

Answer 1

You need to add an Event Listener to the load of the async script and after append to the HEAD your CSS with !important rule. Example

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);