仅在一定宽度下执行 Jscript 没有 jQuery

Question

好吧，经过多次尝试都没有成功，我一直在尝试使用以下 JScript 命令（没有 jQuery）更改以下 div 的顺序仅当 window 处于一定宽度时； 特别是 1024 像素及以下。使用的 JScript 成功执行并随后更改了 div 的顺序，但是它出现在所有宽度上。

我希望 box-3 高于 box-1 当 window 宽度等于或小于比 1024px（不使用 jQuery）。

<html>
 <body>
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
 </body>
</html>

<script type="text/javascript">
 var content = document.querySelector('.box-3');
 var parent = content.parentNode;
 parent.insertBefore(content, parent.firstChild);
</script>

提前致谢！

编辑：问题不同于 "Execute function based on screen size"（由 Jim 撰写），因为提供给 Jim 的解决方案包括 - 并被接受 - jQuery，而这个问题纯粹是针对香草 Javascript

Answer 1

好的，所以您使用 window.onresize 的方法是正确的。

一个建议的编辑和一个好点:

如果您希望在 window 调整大小之前重新排序，请确保在使用 window.onload 打开页面时检查 window 的大小。为了使一切更简洁，您可以将您的重新排序代码放入一个函数中，比方说 myResizeFunction() 然后做这样的事情

var needsReset = false;
window.onresize = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    } else {
        if( needsReset ) {
            //UNDO THE REORDER OR
            //WHATEVER CODE YOU WANT IF SCREEN IS LARGER THAN TARGET SIZE
        }
    }
}
window.onload = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    }
    //NO ELSE BLOCK NEEDED BECAUSE
    //IF SCREEN SIZE ISN'T IN TARGET RANGE WE HAVE NOTHING TO UNDO
}
function myResizeFunction() {
    //NOW YOUR REORDER CODE LIVES HERE
    //SET needsReset TO true BECAUSE WE'VE CHANGED THE ORDER OF ELEMENTS
    needsReset = true;
}

我用的是手机，所以无法测试 DOM 的变化，但请尝试 parent.lastChild。

如果您要删除 .box-3 然后将其插入 .box-1 前面（我相信这是正在发生的事情）然后在 [=14] 上执行 insertBefore =] 应该把盒子 3 放回原来的位置

仅在一定宽度下执行 Jscript 没有 jQuery

Execute Jscript only at certain width without jQuery

html

javascript

execute

jscript