tim*_*son 1 javascript css iframe cross-domain crocodoc
是否可以使用 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，所以我的目的是让这个问题和答案对使用此服务的人有价值也。
我参加聚会已经很晚了，但我只是想让你们知道您实际上可以单独使用 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;
}
祝你好运！
| 归档时间： |
|
| 查看次数： |
3100 次 |
| 最近记录： |