Fatal编程技术网
  • javascript/
  • Javascript 使用CSS更改DOM元素顺序（Crocodoc）

Javascript 使用CSS更改DOM元素顺序（Crocodoc）

javascript css iframe

Javascript 使用CSS更改DOM元素顺序（Crocodoc）,javascript,css,iframe,cross-domain,crocodoc,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> </bod

是否可以使用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内容总是让我对*^%$感到困惑。作为一个实际应用，我实际上指的是，所以我的目的是使这个问题和答案对使用此服务的人也有价值

不能使用css更改DOM顺序。但是，您可以应用
位置：绝对css样式，并根据需要设置顶部、底部、左侧和右侧样式来定位元素


在您的情况下，最好是
位置：fixed；底部：0
将工具栏定位在浏览器窗口的底部。
不能使用css更改DOM顺序。但是，您可以应用
位置：绝对css样式，并根据需要设置顶部、底部、左侧和右侧样式来定位元素


在您的情况下，最好是
位置：fixed；底部：0
将工具栏放置在浏览器窗口的底部。
我来晚了，但我只想让你们知道，实际上你们可以单独使用CSS更改DOM顺序

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

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

（此处仅使用webkit供应商前缀。css令人眼花缭乱，因为没有它）

然后，通过指示div的顺序来交换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;
}



祝你好运
 我参加聚会已经很晚了，但我只想让你们知道，实际上你们可以单独用CSS更改DOM顺序

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

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

（此处仅使用webkit供应商前缀。css令人眼花缭乱，因为没有它）

然后，通过指示div的顺序来交换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操纵dom运行时也会产生一些不自然的效果。因为你得等多姆雷迪。这意味着工具栏将显示在顶部，然后取消显示并移动到底部。这可能会产生一点奇怪的效果。同意Javascript也会让它变得丑陋…理想情况下，我会按照我想要的方式呈现DOM，但存在一个不相关的问题，即无法在AJAX请求中使用。我无法帮助您使用crocodoc，不知道这件事：）谢谢，是的，我想到了，尽管这是一个不可持续的解决方案哦，固定底部似乎更好…也许位置：固定在你的情况下效果更好。用javascript操纵dom运行时也会产生一些不自然的效果。因为你得等多姆雷迪。这意味着工具栏将显示在顶部，然后取消显示并移动到底部。这可能会产生一点奇怪的效果。同意Javascript也会让它变得难看…理想情况下，我会按照我的要求呈现DOM，但存在一个不相关的问题，即无法在AJAX请求中使用。我无法帮助您使用crocodoc，不知道这件事：也许这样的事情可以工作：“DFSQ谢谢，我也会考虑……也许这样的事情可以起作用：”DFSQ谢谢，我也会考虑…