javascript – 在网页上自定义Twitter推文

2024年1月29日 275次阅读

我想要完成的事情：

《javascript – 在网页上自定义Twitter推文》

当我检查元素并获得适当的类然后应用样式时,似乎没有任何事情发生.为什么是这样？如何为我的网页更改我的推文样式？

.Tweet-header.u-cf{
  display:none !important;
  
}
div#twitter-widget-0 {
    background: orange;
}
<script src="https://platform.twitter.com/widgets.js"></script>
<blockquote class="twitter-tweet" data-lang="en"><p lang="ro" dir="ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut porttitor elit. Nulla mattis sem et ullamcorper pretium. Nunc malesu</p>&mdash; Jason (@jasontestsus) <a href="https://twitter.com/jasontestsus/status/699685458146623489">February 16, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

我的小提琴：https://jsfiddle.net/jzhang172/4ewm1hjd/

最佳答案 您可以使用Twitter
widget events检测加载推文的时间,然后根据需要更新CSS：

$(function() {
  twttr.events.bind('loaded', function(event) {
    var $iframe = $(frames['twitter-widget-0']);
    $('#twitter-widget-0', $iframe.contents()).css({
      'background-color': 'orange'
    });
    $('.Tweet-header.u-cf', $iframe.contents()).css({
      'display': 'none'
    });
  });  
});

您的CSS未应用于推文小部件的原因是小部件位于iframe中,据我所知,iframe将忽略其父文档中的CSS规则,除非iframe和父文档位于同一个域中.

点赞