javascript - 如何在 javascript/jquery 中更改 iframe 高度？

Question

我正在处理如下所示的 js/jquery 代码，我想在其中覆盖下面 HTML 代码 中存在的 css。

console.log("iframe height is", $("div.scribble-live").find("iframe").css("height"));
$("div.scribble-live").find("iframe").css("height", "200px");
console.log("iframe height is", $("div.scribble-live").find("iframe").css("height"));

.scribble-live, .scrbbl-embed {
  border: thin black solid;
  margin: 1em;
}

iframe {
  background: orange;
}

<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 width="100%" height="15236px" frameborder="0"
           class="scrbbl-embed scrbbl-event"
           style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;">
         </iframe>
       </div>
</div>

问题陈述:

上面的 js/jquery 代码似乎没有覆盖 css ( style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;") 出现在上面的 HTML 代码中。

Answer 1

我想您在这里需要做两件不同的事情，因为在生成的 HTML 代码中有两个地方有高度值。因为据我所知，您无法删除它们中的任何一个，所以我们需要按照以下步骤进行操作:

<强>1。属性变化

第一件事是使用以下代码行更改代码中的高度属性:

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

这将更改以下 HTML 中的高度属性，如下所示:

<iframe width="100%" height="200px" frameborder="0"
       class="scrbbl-embed scrbbl-event"
       style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;">
 </iframe>

您可以进一步阅读 .attr() here .

<强>2。样式属性变化

第二件事是改变样式属性的高度值:

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

通过这样做，样式属性中的第二个高度也将被更改:

<iframe width="100%" height="200px" frameborder="0"
       class="scrbbl-embed scrbbl-event"
       style="border: none; visibility: visible; width: 50px; height: 200px; min-width: 100%;">
     </iframe>

阅读更多关于 jQuery 函数的信息 .css() here .

总结

通过这些函数调用，您正在更改两个值。让我分享一张图片，哪个功能正在改变什么:

更新: 刚刚意识到您的 HTML 中有 2 倍的高度，所以我已经基于此更新了我的答案。