有没有办法改变外部脚本的 CSS 样式？答案

【问题标题】：Is there a way to change a css style of an external script?有没有办法改变外部脚本的 CSS 样式？
【发布时间】：2015-09-30 13:17:45
【问题描述】：

我的一个页面上运行了一个外部脚本 -

<script type="text/javascript">var opt={id:829,cnt:3,bg:''};(function(){var script=document.createElement("script");script.type="text/javascript";script.async=true;script.src="https://kvr.ru/js/widget/api.js?id=829";document.getElementsByTagName("head")[0].appendChild(script);})();</script>

当我将它插入我的页面时，我会看到一个难看的垂直滚动条。

我已经通过 firebug 更改了一些 css 值，它有帮助，但是我如何覆盖脚本获取的 css？

我想从外部代码更改以下 css 中的 font-size：

p.info-widget, p.info-widget a{
color:#959595;
font-size:10px;
margin:0 1px 0 0;
text-align:right;

}

我尝试将 p.info-widget 插入到我的 main.css 中，并用 !important 覆盖它的字体大小，但它不起作用（

【问题讨论】：

显示更多的 CSS 和它的目标 HTML
那么您的选择器是否比脚本输出的样式更具体？
看看这个链接，它可能会有所帮助。 w3schools.com/css/css_howto.asp
把这个放到java脚本中：document.getElementById("Your id").style.fontSize = "size";注意：这在 Firefox 中有效。

标签： javascript html css

【解决方案1】：

在该脚本的 css 之后添加或包含您的 css，因为它会覆盖它。

例如，如果您的外部 css 有：

p.info-widget, p.info-widget a{
color:#959595;
font-size:10px;
margin:0 1px 0 0;
text-align:right;
}

您可以通过在其后包含这个来覆盖该 css。

p.info-widget, p.info-widget a{
color:#2e2e2e; // changed color
font-size:10px;
margin:0 1px 0 0;
text-align:right;
}

【讨论】：