[英]How to overwrite asynch css?
I am using one of the SaaS for lead finding. 我正在使用一种SaaS进行潜在客户查找。 I paste their code just like I paste google analytics code on top of my page (for example):
我粘贴他们的代码,就像将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>
However, the widgets position that I am receiving from the call, is set in the css file that I get in response. 但是,我从调用中收到的小部件位置是在我得到响应的css文件中设置的。 All the classes have
!important
tag there, so I cannot overwrite it using css classes that I've defined in my static files. 所有的类都有
!important
标记,因此我无法使用我在静态文件中定义的css类覆盖它。
My question is: how can I overwrite this ansych css? 我的问题是:如何覆盖此ansych CSS?
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. 您需要将事件侦听器添加到异步脚本的加载中,并使用!important规则将CSS附加到HEAD之后。 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.