在没有jQuery的情况下，只在特定宽度执行Jscript
在没有jQuery的情况下，只在特定宽度执行Jscript
提问于 2018-03-02 03:52:32
好的，为了不占上风，我一直试图在窗口宽度一定的情况下，使用下面的JScript命令(不包括jQuery) only来更改下面的div的顺序；，特别是1024 is和下面。所使用的JScript在执行和随后更改div的顺序方面是成功的，但是它发生在所有宽度上。
我希望box-3在窗口宽度等于或小于1024 be (不使用jQuery)时高于box-1。
<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>提前感谢！
编辑:问题不同于“基于屏幕大小的执行函数”(由Jim编写)，因为给Jim的解决方案包括--并接受-- jQuery，而这个问题完全是针对普通的Javascript的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-02 04:18:02
好吧，所以你在正确的轨道上使用window.onresize。
A建议编辑和一个好的点
如果希望在调整窗口大小之前进行重新排序，请确保在使用window.onload打开页面时检查窗口的大小。为了使一切更加简洁，您可以将重新排序的代码放入一个函数中，假设是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前面(我相信这就是正在发生的事情)，那么在parent.lastChild上执行insertBefore应该将方框3放回原来的位置
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49062565
复制相关文章
相似问题
腾讯云开发者
