如何获取 iframe 样式属性值然后更新其父元素

Question

这是生成的动态代码，我无法控制它。

<div class="iframe__wrapper">
    <iframe height="0" width="0" style="display: block; visibility: visible;" src=""></iframe>
</div>

这就是我想要实现的，使用 javascript。 我想获取iframe样式属性值，假设此style为'display: block; visibility: visible;' 'display: block; visibility: visible;' 然后以'iframe__wrapper'的父class为目标并覆盖其styles。

我不想直接针对 class 'iframe__wrapper'来更新它的 styles 因为 class 用于其他页面。

我在使用getElementsByTagName时遇到了一些问题，它说 Uncaught TypeError。

您可以以最简单的方式更改/更新我的代码。

下面是我的代码，你也可以在这里查看https://codesandbox.io/

 const myIframe = document.getElementsByTagName("iframe"); if (myIframe) { myIframe.style.cssText = ` display: block; visibility: visible; `; } const parentDiv = myIframe.parentElement.className += ' iframe__wrapper--updated';

 .iframe__wrapper { padding: 100px; margin: 100px; }.iframe__wrapper--updated { padding: 0; margin: 0; }

 <div class="iframe__wrapper"> <iframe style="display: block; visibility: visible;" title="Inline Frame Example" width="300" height="200" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"> </iframe> </div>

Answer 1

用这个更新你的脚本

const myIframe = document.getElementsByTagName("iframe")[0];
if (myIframe) {
  myIframe.style.cssText = 'display: block; visibility: visible;';
}
const parentDiv = myIframe.parentElement.className += ' iframe__wrapper--updated';
console.log(myIframe);