Как динамически изменять размер плагина комментариев Facebook с помощью JavaScript?

Мой DIV для отображения плагина комментариев Facebook (например, .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/


javascript facebook css facebook-javascript-sdk facebook-comments
person Ryan    schedule 29.03.2013    source источник
comment
почему нельзя использовать css? stackoverflow.com/questions/6500424/   -  person btevfik    schedule 29.03.2013
comment
я думаю, вы можете изменить css из js.   -  person btevfik    schedule 29.03.2013

Ответы (3)


arrow_upward
2
arrow_downward

Это очень возможно.

Класс .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

person OpherV    schedule 29.03.2013

arrow_upward
1
arrow_downward

Этот код должен помочь:

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

Это сделает «.fb-комментарии» шириной 200 пикселей.

person Community    schedule 03.08.2013

arrow_upward
0
arrow_downward

Необходимо обновить три элемента, чтобы полностью изменить размер.

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