如何用JavaScript选中iframe标签？解决样式设置报错问题

嘿，我来帮你搞定这个报错问题！

为什么会报错？ #

你写的document.getElementsByTagName("iframe").style.resize = "vertical"之所以报错，核心原因是：
document.getElementsByTagName()返回的是一个HTMLCollection（元素集合），它是多个元素的集合，而不是单个DOM元素。集合本身并没有.style属性，所以直接访问就会抛出“property 'resize' of undefined”的错误。

怎么解决？ #

1. 先正确获取单个iframe元素

如果你页面里只有一个iframe，可以通过索引取集合里的第一个元素：

document.getElementsByTagName("iframe")[0].style.resize = "vertical";

或者更简洁的方式，用querySelector直接获取匹配的第一个iframe：

document.querySelector("iframe").style.resize = "vertical";

如果页面有多个iframe，建议给目标iframe加个专属的id或class，比如给iframe设置id="editPartIframe"，然后精准获取：

document.getElementById("editPartIframe").style.resize = "vertical";

2. 结合你的Kendo Window场景调整代码

你是用Kendo Window动态加载内容生成的iframe，这时候要注意时机问题：必须等Kendo Window渲染完成、iframe已经存在于DOM中后，再执行样式设置。可以利用Kendo Window的open事件来触发：

function editPart(url) {
  $("#windowEditPart").kendoWindow({
    content: { url: url },
    open: function() {
      // 窗口打开后，iframe已生成，此时获取并设置样式
      const targetIframe = document.querySelector("#windowEditPart iframe");
      if (targetIframe) {
        targetIframe.style.resize = "vertical";
        // 建议搭配overflow:auto，让调整大小后内容能正常滚动
        targetIframe.style.overflow = "auto";
      }
    }
  });
  // 你的其他代码...
}

这样修改后，就能避免找不到元素的问题，成功给iframe设置垂直可调整大小的样式啦！

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