如何在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代码似乎没有覆盖上面HTML代码中style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;"的CSS（ style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;" ）。

Answer 1

我猜这里需要做2件事，因为在生成的HTML代码中有2个地方有高度值。 据我了解，由于您无法删除其中任何一个，因此我们需要执行以下步骤：

1.属性变更

第一件事是使用以下代码行更改代码的height属性：

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

这将更改以下HTML中的height属性，如下所示：

<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（） 。

2.样式属性更改

第二件事是更改样式属性的高度值：

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

通过这样做，还将更改style属性中的第二个高度：

<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（）的更多信息。

摘要

通过这些函数调用，您可以更改两个值。 让我分享一张图片，其中哪个功能正在改变：

更新：刚刚意识到您的HTML高度是原来的2倍，因此我根据此更新了答案。

Answer 2

用于覆盖样式属性中的height prop 。

$("div.scribble-live .scrbbl-event").height("200px"); 

用于覆盖 iframe height属性。

$("div.scribble-live .scrbbl-event").attr("height", "200px");

您必须执行两个脚本，因为style attribute height prop style attribute将始终覆盖iframe的高度属性值。