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 回答