javascript - 即时更改 Twitter 小部件的外观

Question

我的文档中有以下代码:

<a class="twitter-widget" href="url" data-widget-id="138843679974442730">Twitter Timeline</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

data-widget-id 连接到一种样式。现在，如果网站上的主题发生变化(我替换了所有负责的样式表和图像)，除了 Twitter 小部件之外，一切都会发生变化。

由于小部件本身是一个 iframe，我无法更改附加到它的任何样式表。

是否有一种无需重新加载(删除标签、创建标签、运行 js)即可更改小部件样式的简单方法？

Answer 1

您可以使用 JavaScript 为 Twitter 小部件 iframe 中的元素设置样式。

首先，您需要 iframe 的嵌套浏览上下文中的事件文档:

var doc = document.getElementById("twitter-widget-0").contentDocument;

然后，您可以应用样式(例如):

doc.querySelector(".timeline-header").style["background-color"] = "black";
doc.querySelector(".timeline-header a").style["color"] = "white";

示例:http://codepen.io/smockle/pen/IJHnj