twitter 提要小部件的 CSS 覆盖答案

【问题标题】：CSS Override for twitter feed widgettwitter 提要小部件的 CSS 覆盖
【发布时间】：2013-06-17 02:19:11
【问题描述】：

我已经阅读了一些关于 Twitter 小部件的 CSS 覆盖的其他主题。我试过添加

!important

但它没有生效。我要做的就是隐藏小部件的中间部分。当我使用萤火虫时，div 消失了。目前我正在使用，

#twitter-widget-0 .timeline .stream {
display: none !important;
}

请有人帮助我使用一些 javascript 或 jQuery。任何帮助都会很棒！

【问题讨论】：

你是如何使用这个小部件的？这是从另一台服务器加载 js 的第三方小部件吗？如果是这样，你不能编辑他们的CSS
此外，有时小部件会加载到 iFrame 中。如果是这种情况，您将无法覆盖 CSS。
How to override styles in Iframe? 的可能重复项

标签： javascript jquery css twitter

【解决方案1】：

新的 Twitter 小部件通过在您的文档中插入 <iframe> 来工作。因此，由于Same Origin Policy，您无法在父文档中使用 CSS 修改样式。

您可以对其进行的唯一更改是 Twitter 通过data-* 属性公开的设置。例如

data-chrome="noheader nofooter" data-link-color="#cc0000"

没有隐藏正文的选项，只能隐藏页眉或页脚。

Documentation

旧的 Twitter 小部件的工作方式不同，它直接将元素插入当前文档而不是 iframe，因此旧的小部件允许您覆盖样式。

如果 Twitter 小部件不够灵活，无法满足您的需求，那么您始终可以使用 Twitter API 来获取推文并从本质上生成您自己的小部件。这样做的缺点是您必须管理 API 调用以获取推文并实现缓存等。

【讨论】：

这解决了我的问题，因为我可以先删除我不希望 Twitter 设置的数据，然后我就可以操作其余的数据。感谢您提供文档链接。

【解决方案2】：

有可能，我正在使用 jQuery：

    (function ($) {

  window.setTimeout(function(){
    $(".twitter-timeline").contents().find(".e-entry-title").attr("style", "font-family: 'Gill Sans W02 Book' !important; font-size: 14px;");
  }, 1000);

})(jQuery);

【讨论】：

【解决方案3】：

您可以尝试使用 javascript 对其进行操作。

var frm = frames['iframeId'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

这样你就可以在你的 iframe 中放置一个 css 样式。

【讨论】：

大家好。对不起，我没有早点回复。谢谢大家的回复！ @JREN 我会将这个脚本放在页面的哪里？ thescribblingape.com/contact
在你的框架之后，以便你的框架首先加载，然后你将它注入到你的框架中。