在網頁

自定義Twitter的分享Tweet我試圖做到：在網頁

當我檢查的元素，並得到適當的類，然後應用樣式，好像沒有什麼改變。爲什麼是這樣？我怎樣才能改變我的網頁推文風格？

.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/

來源

2016-02-16 Snorlax

小提琴是否工作？我不清楚確切的問題是什麼。 – j08691

[如何使用我自己的CSS設計Twitter小部件]可能的重複（http://stackoverflow.com/questions/24663924/how-to-style-twitter-widget-using-my-own-css） – brod

小提琴是在我的最後工作，Twitter是不是在你的工作？當我試圖將它嵌入到堆棧中時，它沒有顯示Twitter，但是我的URL提示沒有。 – Snorlax

您可以使用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將忽略其父代document中的CSS規則，除非iframe和父代document位於相同的域中。

來源

2016-02-18 05:34:36 twernt

回答

相關問題