Twitter 嵌入 - 如何覆盖 CSS

Posted 2023-03-28

【中文标题】Twitter 嵌入 - 如何覆盖 CSS

【英文标题】：Twitter embed - How to override 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 提要，你就可以做到，否则我怀疑它是可能的..

【参考方案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%"
      );
  );
);