1

是否可以使用 CSS 更改 DOM 元素顺序?我有一个 iframe,我想将工具栏从iframe 的主要内容的上方更改为下方。

所以从这里:

<iframe>
<html>
  <body>
    <div id='toolbar'></div>
    <div id='main_content'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

对此:

<iframe>
<html>
  <body>
    <div id='main_content'></div>
    <div id='toolbar'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

如果使用 CSS 无法做到这一点,有人可以建议如何在 Javascript 中执行此操作吗?操纵 iframe 内容总是让我感到困惑 *^%$。作为一个实际应用程序,我实际上指的是使用 Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/) 生成的 iframe,所以我的目的是让这个问题和答案对使用此服务的人有价值也。

4

2 回答 2

6

我参加聚会已经很晚了,但我只想让你们知道,您实际上可以仅使用 CSS 更改 DOM 顺序。

尽管要做到这一点,我们必须使用 CSS3 flexbox 语法。所以基本上 IE10+,在我的情况下通常不是问题,因为我用它来操作移动网站。

那么我们该怎么做呢?父元素需要成为一个 flexbox 元素。例如:

(此处仅使用 webkit 供应商前缀。没有它的 css 令人眼花缭乱)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

然后,通过以下方式指示它们的顺序来交换 div:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

祝你好运!

于 2014-08-23T14:12:44.663 回答
1

您不能使用 css 更改 DOM 顺序。但是,您可以根据需要应用position: absolute;css 样式并通过设置顶部、底部、左侧、右侧样式来定位元素。

在您的情况下,最好将position: fixed; bottom: 0;工具栏放置在浏览器窗口的底部。

于 2012-12-23T12:59:39.003 回答