javascript - 使用 getElementsByTagName 的 CSS 样式未生效

Question

我正在尝试向模式中的输入添加一个事件监听器，以便在选择输入(触发焦点事件)时更改正文的高度和溢出属性。

我正在使用 getElementsByTagName 获取模态中所有输入的数组，然后使用 for 循环将监听器添加到所有输入。我知道这些监听器已正确附加，因为当我选择不同的输入时，会触发 console.log 语句。

奇怪的是，console.log 语句打印出“100%”，但如果我将该命令复制并粘贴到实际的控制台中，它会返回一个空字符串。

当我检查它们时，在我关注输入之前或之后， body 的高度和溢出属性都没有改变。但是，如果我将这些样式声明复制到控制台中，它们会立即生效，然后 document.getElementsByTagName('BODY')[0]['style'][attribute] 返回 100% 或 '隐藏'按照我填写的任何属性。

var inputs = document.getElementsByTagName('input');

    for(var i = 0; i < inputs.length; i++){
        inputs[i].addEventListener('focus', function(){
            document.getElementsByTagName('BODY')[0]['style']['height'] = '100%';
            document.getElementsByTagName('BODY')[0]['style']['overflow'] = 'hidden';

            console.log(document.getElementsByTagName('BODY')[0]['style']['height'])
        })
    }

由于我的命令在复制/粘贴到控制台时有效，所以我确信没有拼写或语法错误。最奇怪的部分是，当我选择输入时，我期望的 console.log 语句会触发，但实际上没有任何效果发生。我觉得这是某种范围界定问题，但我不确定为什么我的 js 没有按照我的预期进行。

编辑:在做了更多测试之后，我意识到呃，我的模式是一个 iframe，所以我选择的 body 标签是模式的主体而不是更大的外页。

这很好奇，因为我认为既然页面上有两个正文，运行 document.getElementsByTagName('body') 将返回一个数组，而不仅仅是它遇到的第一个正文。

所以我认为在这一点上，问题变成了“我如何选择 iframe/modal 外部的主体？”

Answer 1

所以我的问题的根本原因是我在其中应用我的事件监听器的模式是一个 iframe，因此它有自己的 body 标签。因此，我试图应用于包含模态的更大主体的属性没有生效，而是被分配给了 iframe 的主体。

为了解决这个问题，我需要做的就是将我的属性声明更改为

parent.document.getElementsByTagName('BODY')[0]['style']['height'] = '100%';;
parent.document.getElementsByTagName('BODY')[0]['style']['overflow'] = 'hidden';

在iframe中，window.parent指的是父文档的全局对象，而不是文档对象本身。