从深度嵌套的 IFRAME 中修改 DIV CSS 属性答案

【问题标题】：Modifying DIV CSS properties from within a deeply nested IFRAME从深度嵌套的 IFRAME 中修改 DIV CSS 属性
【发布时间】：2010-04-30 22:17:20
【问题描述】：

我正在使用一个商业智能工具，它只允许我访问深度嵌套的 iframe 来添加代码。理想情况下，我想使用 jQuery 和/或普通的旧 JavaScript 来修改 div 的左侧和位置 CSS，该 div 在我的 IFRAME 上方 3 个 iframe。

我有权将 JavaScript/HTML 添加到 reportiframe IFRAME 中的 divArea0_1。我想修改 JSTabbedPanel IFRAME 中包含的 propdiv DIV。希望下面的 HTML 足够清晰。 :) 非常感谢任何想法或帮助。

<html>
<div id = "tabs">
<iframe id = "tabbedPanel">
    <iframe id = "JSTabbedPanel">
        <div id = "treeTypeDiv">
            <div id = "treediv">
                <iframe id = "treeFrame"></iframe>
            </div>
            <div id = "propdiv">
                <iframe id = "propFrame">
                    <div id = "reportpane">
                        <iframe id = "reportiframe">
                            <div id = "divEntire">
                                <div id = "divArea0_1">
                                    <div id = "MyCode goes HERE"></div>
                                </div>
                            </div>
                        </iframe>
                    </div>          
                </iframe>               
            </div>              
        </div>
    </iframe>
</iframe>
</div>
</html>

【问题讨论】：

标签： javascript jquery html dom iframe

【解决方案1】：

假设 ids 不变，直接引用元素的 id 是最快的选择器。使用 css 方法和对象字面量来改变位置（假设是 display:absolute）

$(document).ready(function() {
    $('#propdiv').css({top:'12px', left: '34px'});
});

【讨论】：

如果我在不同的 iframe 中访问一个元素，我不需要指定上下文吗？我只是不确定如何向上移动 2 个 iframe。谢谢。