在 js/jquery 中更改 iframe 宽度/高度答案

【问题标题】：change iframe width/height in js/jquery在 js/jquery 中更改 iframe 宽度/高度
【发布时间】：2019-03-28 22:51:01
【问题描述】：

我正在编写一个 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>

【问题讨论】：

可能的类型？ 200px 不是 200 px
还是不行
工作得很好 -> jsfiddle.net/9wfLah1j
$("div.scribble-live").find("iframe").css("height", "200px");
你试过上面的那行，css() 吗？

标签： javascript jquery css iframe

【解决方案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>

希望对您有所帮助。

【讨论】：