如何使用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');