Twitter 嵌入 - 如何覆盖 CSS答案

【问题标题】：Twitter embed - How to override CSSTwitter 嵌入 - 如何覆盖 CSS
【发布时间】：2018-11-05 04:50:33
【问题描述】：

我正在尝试覆盖嵌入的推文 CSS。我第一次尝试使用常规 CSS，但推文不理解它并且似乎不起作用：https://dev.twitter.com/web/overview/css

我现在正在尝试一种 javascript 方法，但我无法定位推文中的元素。我一直在寻找答案，但它们都是关于 Twitter 时间线的，而不是单个嵌入的推文。

我正在使用https://dev.twitter.com/web/javascript/events：

twttr.ready( function(twttr){

twttr.events.bind('rendered',function (event) {

var tgt = event.target;  // Now inside each tweet
// Code to target the content in order to change its css
});

感谢您的帮助。

编辑 // 这是工作脚本：

twttr.ready( function(twttr){

twttr.events.bind('rendered',function (event) { 

    var tgt = event.target;

    $(tgt).contents().find(".EmbeddedTweet").css({  
        "border":"2px solid black",
        "border-radius":"7px",
        "max-width":"100%"
    });

  });

});

【问题讨论】：

这可能有助于dev.twitter.com/web/embedded-tweets/css 或ctrlq.org/code/19933-embed-tweet-with-javascript
不，嵌入的推文没有考虑我的 CSS 代码，这就是我尝试使用 javascript 的原因。我没有使用 javascript 加载推文，我已将嵌入代码放入我的博客文章中。另外，我想完全设置它们的样式，而不仅仅是选择深色/浅色样式。
如果你可以为你的推文获取 RSS 提要，你就可以做到，否则我怀疑它是可能的..

标签： javascript css twitter embed

【解决方案1】：

我找到了答案，这里是如何为加载的推文动态设置样式：

twttr.ready( function(twttr){

twttr.events.bind('rendered',function (event) { 

var tgt = event.target;

$(tgt).contents().find(".EmbeddedTweet").css({  
    "border":"2px solid black",
    "border-radius":"7px",
    "max-width":"100%"
   });

 });

});

【讨论】：

【解决方案2】：

以下代码对我有用 -

twttr.ready(function(twttr) {
  twttr.events.bind("rendered", function(event) {
    var tgt = event.target;
    $(tgt.shadowRoot)
      .find(".EmbeddedTweet")
      .css({
        "max-width": "100%"
      });
  });
});

【讨论】：