javascript - 更改特定 Javascript 生成的 iframe 的 CSS 样式

Question

所以我在 html 文档中有以下多个实例:

<div class="foo">
    <script>javascript that generates: 
        <span class="bar">
            <iframe>iframe contents
            </iframe>
        </span>
    </script>
</div>

以及相应的CSS代码:

.foo {
}
.bar iframe {
    left: 5% !important; 
    top: 100% !important;
}

我需要更改 left和 top款式.bar iframe在 HTML 代码的一个实例中，无需修改其他代码，并编辑 <script> 中的任何内容标签是不可能的。有没有办法使用 <div> 来应用不同的样式？标签？

由于 .bar iframe 的嵌套性质，这个问题让我感到困惑样式。任何建议将不胜感激，谢谢!

Answer 1

您可以通过向 CSS 选择器添加更多详细信息来轻松实现此目的:

.foo .bar iframe{
    left: 10% !important;
    top: 50% !important;
}

.bar iframe {
    position:absolute;
    left: 5% !important; 
    top: 100% !important;
}

更具体的选择器“.foo .bar iframe”只会选择类“foo”的 div 下的 iframe。您可以使用 my fiddle here 中的确切设置进行游戏.