如何使用JavaScript動態調整Facebook評論插件的大小？

Question

我的用於顯示Facebook註釋插件的DIV（例如.fb-comments）由CSS修復，請考慮如果我無法修改該CSS，是否可以在所有註釋加載後使用純JS解決方案調整註釋插件的大小？

<div style='background-color:red;height:200px;' 
     class="fb-comments" data-href="http://example.com" 
     data-num-posts="10"></div> 

演示：http://jsfiddle.net/8MyV3/1/

Answer 1

這是非常可能的。

.fb-comments類是通過CSS設置的，但仍可以使用!important標誌覆蓋它。

讓得到它：

1. 首先，你需要覆蓋一些CSS：

   .fb-comments, .fb-comments * { 
       width:100% !important; 
   } 
   

2. 然後你就可以把你的Facebook評論插件在其自己的容器

   <div class="fb_container"> 
        <div class="fb-comments" data-href="http://example.com" data-num-posts="10"></div> 
   </div> 
   

3. 可選 - 用CSS樣式你想要的東西：

   .fb_container{ 
       width: 200px; 
   } 
   

4. 然後你就可以用JS編程改變：

   $(".fb_container").css("width","200px"); 
   

這裏有一個working jsFiddle example

Answer 2

此代碼應訣竅：

$('.fb-comments').attr('data-width', '200'); 

這將使「.fb-comments」寬200px。

Answer 3

需要更新三個元素才能完全調整大小。

$('.fb-comments').attr('data-width', '200'); 
$('.fb-comments span').css('width', '200'); 
$('.fb-comments span iframe').css('width', '200');