好的,因此,我尝试了很多尝试,但都没有成功,仅在窗口处于一定宽度时,我才尝试使用以下JScript命令(不使用jQuery)更改以下div的顺序;特别是1024px及以下。使用的JScript可成功执行并随后更改div的顺序,但是它会在所有宽度上发生。
我希望当窗口宽度等于或小于1024px(不使用jQuery)时box-3高于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
最佳答案
好的,所以使用window.onresize
可以使您处于正确的轨道。
建议的修改和要点:
如果希望在调整窗口大小之前进行重新排序,请确保使用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
的前面(我相信这是发生了什么),那么在insertBefore
上执行parent.lastChild
,应将框3放回原来的位置关于javascript - 仅在不使用jQuery的特定宽度下执行Jscript,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49062565/