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");
   

这是一个 working jsFiddle example