在 js/jquery 中更改 iframe 的寬度/高度

Question

我正在處理一個 js/jquery 代碼，我想在其中覆蓋下面 html 代碼中存在的當前 css。

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 代碼似乎沒有覆蓋上面 HTML 代碼中存在的 css（ style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;" ）。

我也嘗試了以下腳本，但似乎不起作用。

<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

一切似乎都有效。 可能會考慮在iframe上使用.ready()回調或使用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>

希望有幫助。