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

先说说你原代码的问题：

• document.getElementsByTagName("iframe")返回的是HTMLCollection集合，不是单个DOM元素，直接访问.style肯定触发TypeError，因为集合没有这个属性
• 没筛选符合目标样式的iframe，直接修改所有iframe样式不符合需求
• 逻辑顺序错误，且没判断父元素是否是目标类

修正后的实现思路 #

1. 遍历所有iframe，检查它的display和visibility实际生效样式是否符合要求（别直接匹配整个style字符串，浏览器会自动格式化空格/属性顺序）
2. 对符合条件的iframe，向上查找最近的带有iframe__wrapper类的父元素
3. 找到后给父元素添加新类来覆盖原有样式

完整代码 #

JavaScript

// 遍历所有iframe元素
document.querySelectorAll('iframe').forEach(iframe => {
  // 获取iframe实际生效的样式
  const computedStyle = window.getComputedStyle(iframe);
  // 检查目标样式是否匹配
  if (computedStyle.display === 'block' && computedStyle.visibility === 'visible') {
    // 向上查找最近的目标父容器
    const parentWrapper = iframe.closest('.iframe__wrapper');
    if (parentWrapper) {
      // 添加新类覆盖样式
      parentWrapper.classList.add('iframe__wrapper--updated');
    }
  }
});

CSS

.iframe__wrapper {
  padding: 100px;
  margin: 100px;
}

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

HTML

<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&amp;layer=mapnik">
</iframe>
</div>

<!-- 测试用的其他iframe，不会被处理 -->
<div class="iframe__wrapper">
  <iframe style="display: none; visibility: hidden;"
    title="Test Frame"
    width="300"
    height="200">
</iframe>
</div>

关键细节说明 #

• 用querySelectorAll遍历iframe，返回的NodeList支持forEach，比getElementsByTagName更易用
• getComputedStyle获取实际生效的样式，比直接读style.cssText更可靠，避免浏览器格式化导致的匹配失败
• closest('.iframe__wrapper')能精准找到最近的目标父容器，不管iframe嵌套层级
• classList.add添加类不会覆盖原有类名，比直接修改className更安全

内容的提问来源于stack exchange，提问作者clarkf