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, которые я определил в своих статических файлах.

Мой вопрос: как я могу переписать этот псих css?

Answer 1

Вам необходимо добавить прослушиватель событий на загрузку сценария асинхронного вызова и после добавления в HEAD вашего CSS с важным правилом. Пример

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