javascript - 如何使用 JavaScript 动态调整 Facebook 评论插件的大小？

Question

我显示 Facebook 评论插件（例如.fb-comments）的 DIV 由 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");
   

这是一个有效的 jsFiddle 示例

Answer 2

这段代码应该可以解决问题：

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

这将使“.fb-comments”宽 200 像素。

Answer 3

需要更新三个元素才能完全调整大小。

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