首页 > 编程语言> > javascript-使用CSS更改DOM元素顺序(Crocodoc)

javascript-使用CSS更改DOM元素顺序(Crocodoc)

2019-10-09 17:39:23 作者：互联网

这个问题已经在这里有了答案： > How can I reorder my divs using only CSS? 23个
是否可以使用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内容总是使* ^％$感到困惑.作为实际的应用程序,我实际上指的是iframe that is generated with Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/),因此我的目的是使这个问题对那些使用此服务的人员也很有价值.

解决方法:

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

尽管要做到这一点,我们必须使用CSS3 flexbox语法.所以基本上IE10,对于我来说通常不是问题,因为我使用它来操纵移动网站.

那么我们该怎么做呢？
父级需要成为flexbox元素.例如：

(此处仅使用webkit供应商前缀.没有它,css令人眼花as乱)

#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;
}

祝好运！

标签：javascript,css,cross-domain,iframe,crocodoc
来源： https://codeday.me/bug/20191009/1880894.html