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

【问题标题】：How to get the iframe style attribute value then update its parent element如何获取 iframe 样式属性值然后更新其父元素
【发布时间】：2022-09-27 10:40:19
【问题描述】：

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

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

这就是我想要实现的，使用 javascript。我想获取iframe 样式属性值，假设这个style 是\'display: block; visibility: visible;\'，然后定位它的父类\'iframe__wrapper\' 并覆盖它的样式。

我不想直接针对 \'iframe__wrapper\' 类来更新其样式，因为该类在其他页面中使用。

我在使用getElementsByTagName 时遇到了一些问题，它显示未捕获的类型错误。

笔记：正文内容内还有其他 iframe，所以我认为 getElementsByTagName 不是正确的方法？具有该样式值的 iframe 生成的代码有时会出现在 head 标签内，有时会出现在 body 标签内，甚至会出现在 html 标签内。

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

下面是我的代码，你也可以在这里查看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>

标签： javascript jquery

【解决方案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);

【讨论】：

正文内容内还有其他 iframe，所以我认为 getElementsByTagName 不是正确的方法？具有该样式值的 iframe 生成的代码有时会出现在 head 标签内，有时会出现在 body 标签内，甚至会出现在 html 标签内。