如何在javascript/jquery中更改iframe高度? [英] How to change iframe height in javascript/jquery?

问题描述

我正在处理如下所示的js/jquery代码，在该代码中，我要覆盖下面的 HTML代码中存在的CSS.

I am working on a js/jquery code as shown below in which I want to override the css present in the HTML Code below.

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代码中的css(style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;").

The above js/jquery code doesn't seem to override the css ( style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;") present in the HTML code above.

推荐答案

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

I guess there are 2 different things what you need to do here because there are 2 places where you have height values in your generated HTML code. Because you cannot remove any of them as I understand we need to operate with these steps:

1.属性更改

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

The first thing is to change the height attribute from your code with the following line of code:

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

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

This will change the height attribute in the following HTML as below:

<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().

You can read further about .attr() here.

2.样式属性更改

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

The second thing which is changing the style attribute's height value:

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

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

By doing this the second height in the style attribute will be changed as well:

<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().

Read more about jQuery function .css() here.

摘要

使用这些函数调用，您将同时更改两个值.让我分享一张图片，其中哪个功能正在改变:

With those function calls you are changing both values. Let me share a picture which function is changing what:

更新: 刚刚意识到您的HTML高度是原来的2倍，所以我根据这个高度更新了答案.

Update: Just realized that you have the height 2 times in your HTML so I have updated my answer based on that.

这篇关于如何在javascript/jquery中更改iframe高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！