изменить ширину / высоту iframe в js / jquery

Question

Я работаю над кодом js / jquery, в котором я хочу переопределить текущий css, присутствующий в HTML-коде ниже.

JavaScript / jQuery:

<script>
       $("div.scribble-live").find("iframe").css("height", "200 px");
</script>

HTML-код:

<div class="scribble-live">
   <div class="scrbbl-embed">
      <iframe name="ee5bdd02" width="100%" height="15299px" frameborder="0" allowtransparency="true" scrolling="no" title="scrbbl:event ScribbleLive Embed" src="" class="scrbbl-embed scrbbl-event" style="border: none; visibility: visible; width: 50px; height: 15299px; min-width: 100%;"></iframe>
   </div>
</div>

Постановка задачи:

Приведенный выше код js / jquery, похоже, не перекрывает CSS (style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;"), присутствующий в приведенном выше HTML-коде.

Я также пытался использовать следующие сценарии, но, похоже, это не работает.

<script>
$("div.scribble-live").find("iframe").attr("height", "200px");
</script>

<script>
$("div.scribble-live").find("iframe").attr("height", "200px");
$("div.scribble-live .scrbbl-event").height("200px"); 
</script>

Answer 1

Кажется, все работает. Возможно, стоит использовать .ready() callback на iframe или использовать setTimeout(), чтобы подождать, прежде чем вносить изменения.

$(function() {
  setTimeout(function() {
    $(".scrbbl-event").css("height", "200px");
  }, 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scribble-live">
  <div class="scrbbl-embed">
    <iframe name="ee5bdd02" allowtransparency="true" scrolling="no" title="scrbbl:event ScribbleLive Embed" src="" class="scrbbl-embed scrbbl-event" style="background: #ccc; border: none; width: 50px; height: 15299px; min-width: 100%;"></iframe>
  </div>
</div>

Надеюсь, это поможет.