Question

我正在尝试覆盖嵌入式推文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%"
    });

  });

});

Answer 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%"
   });

 });

});

Answer 2

以下代码对我有用-

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

Twitter嵌入 - 如何覆盖CSS

2 个答案: