javascript - 如何在一个html标签中添加不同的css？

Question

我在我的网站中使用了两个 iframe 标签。我为 1 个标签添加了 css

<style>
iframe{
    opacity: 0;
    border: 0px none transparent;
    position: absolute;
    top: 300px;
    left: 200px;
    height: 300px;
    width: 250px;
    filter:alpha(opacity=0);
}
</style>

但是两个 iframe 都是隐藏的。

我想显示 1 个 iframe 并隐藏另一个。我该怎么做？

Answer 1

如果您有一个简单的页面并且没有太多样式需要维护，则可以为此使用 ID。样式标签下方是定义了 ID 属性的 iframe。这些 ID 属性在样式标签之间使用，以选择您要按 ID 设置样式的 iframe 元素。

<style>
  /* Using ID selector #iframeOne */
  #iframeOne {
    opacity: 0;
    border: 0px none transparent;
    position: absolute;
    top: 300px;
    left: 200px;
    height: 300px;
    width: 250px;
    filter:alpha(opacity=0);
  }
</style>

<!-- Give ID to iframe you want to style. Here it's iframeOne -->
<iframe id="iframeOne"></iframe>

<iframe id="iframeTwo"></iframe>