时间戳

首页 > 解决方案 > 如何在 javascript/jquery 中更改 iframe 高度？

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

问题描述

我正在编写一个 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 代码似乎没有覆盖style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;"上面 HTML 代码中的 css ( )。

标签： javascriptjqueryhtmlcss

解决方案

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

1.属性变化

首先是使用以下代码行更改代码中的高度属性：

$("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");

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

<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 倍，所以我根据此更新了我的答案。

推荐阅读