用js实现对多个div的z-index的调整

Question

document.getElementById("1111").style.Z-INDEX = 9;

Answer 1

document.getElementById("1111").style.zIndex

Answer 2

这个如何得到div的z-index属性我知道，我想要的是个函数实现对层的提前与置后

Answer 3

<div id=11111 onclick="f(this.id)" style=position:absolute;left:250;top:70;width:200;height:100;background:#00ffaa;Z-INDEX:1;>11111</div> 
<div id=22222 onclick="f(this.id)" style=position:absolute;left:220;top:110;width:200;height:100;background:#005500;Z-INDEX:2;>22222</div> 
<div id=33333 onclick="f(this.id)" style=position:absolute;left:140;top:140;width:200;height:100;background:#11aa00;Z-INDEX:3;>33333</div> 
<div id=44444 onclick="f(this.id)" style=position:absolute;left:270;top:100;width:200;height:100;background:#003322;Z-INDEX:4;>44444</div> 
<input type="button" value="提前" onclick="tiqian()">
<input type="button" value="置后" onclick="zhihou()">
选中的层&nbsp;<span id="a"></span>&nbsp;(点击选中层)
<SCRIPT LANGUAGE="JavaScript">
var id = ""
function f(oid)
{
id=oid;
document.getElementById("a").innerHTML = id;
}function tiqian()
{
if(id.length>0)
{
var x = document.getElementById(id).style.zIndex;
var div = document.getElementsByTagName("div");
var y=0,z=0
for(var i=0;i<div.length ;i++ )
{
y = div[i].style.zIndex;
if(y>z)
z=y;
} for(var i=0;i<div.length ;i++ )
{
y = div[i].style.zIndex;
if((y-x)==0 && y<z)
div[i].style.zIndex = y+1;
if((y-x)==1)
div[i].style.zIndex = y-1;
}
}
}function zhihou()
{
if(id.length>0)
{
var x = document.getElementById(id).style.zIndex;
var div = document.getElementsByTagName("div");
var y=0,z=999999
for(var i=0;i<div.length ;i++ )
{
y = div[i].style.zIndex;
if(y<z)
z=y;
} for(var i=0;i<div.length ;i++ )
{
y = div[i].style.zIndex;
if((y-x)==0 && y>z)
div[i].style.zIndex = y-1;
if((y-x)==-1)
div[i].style.zIndex = y+1;
}
}
}
</SCRIPT>

Answer 4

多谢neo_yoho兄弟，还有一个小小的问题，就是这段函数适合操作的是z-index值是相连的，假如他们的z-index值并不相连，提前一个层需要多次的操作。

Answer 5

<script type="text/javascript">
var fdiv = null;function f(oid)
{
    fdiv = document.getElementById(oid);
    document.getElementById("a").innerHTML = oid;
}function tiqian()
{
    if (fdiv==null) return;
    // 寻找zIndex大于选中的，并且最接近的那个
    var nextDiv = null;
    var nextIndex = 999999;
    var fIndex = parseInt(fdiv.style.zIndex);    var divs = document.getElementsByTagName("div");
    for (var id in divs)
    {
        var index = parseInt(divs[id].style.zIndex);
        if (index>fIndex && index<nextIndex)
        {
            nextDiv= divs[id];
            nextIndex = index;
        }
    }
    
    //交换zIndex
    if (nextDiv)
    {
        fdiv.style.zIndex = nextIndex;
        nextDiv.style.zIndex = fIndex;
    }
}function zhihou()
{
    if (fdiv==null) return;
    // 寻找zIndex小于选中的，并且最接近的那个
    var nextDiv = null;
    var nextIndex = 0;
    var fIndex = parseInt(fdiv.style.zIndex);    var divs = document.getElementsByTagName("div");
    for (var id in divs)
    {
        var index = parseInt(divs[id].style.zIndex);
        if (index<fIndex && index>nextIndex)
        {
            nextDiv= divs[id];
            nextIndex = index;
        }
    }
    
    //交换zIndex
    if (nextDiv)
    {
        fdiv.style.zIndex = nextIndex;
        nextDiv.style.zIndex = fIndex;
    }
}</script>
PS:随手写的，没有经过测试
不知道你的提前和置后是指提前/置后一个呢还是提到最前面/置后到最后面
我现在写的是提前一个或置后一个

Answer 6

njsjlx兄弟的代码虽然有殊多错误之处，但是经过一段时间调试就能用了，核心思想是借助你的，所以把15分给你。
如果离开了neo_yoho的帮助我的调试也会变得非常困难，而且你的热心很令我感动，就给你5分吧，少了点，以后有机会多给你些。下面是我调试后的结果。可以实现对随意的z-index值的div进行提前和置后。多谢各位。
<div id=11111 onclick="f(this.id)" style=position:absolute;left:250;top:70;width:200;height:100;background:#00ffaa;Z-INDEX:5;>11111</div> 
<div id=22222 onclick="f(this.id)" style=position:absolute;left:220;top:110;width:200;height:100;background:#005500;Z-INDEX:10>22222</div> 
<div id=33333 onclick="f(this.id)" style=position:absolute;left:140;top:140;width:200;height:100;background:#11aa00;Z-INDEX:44>33333</div> 
<div id=44444 onclick="f(this.id)" style=position:absolute;left:270;top:100;width:200;height:100;background:#003322;Z-INDEX:52;>44444</div> 
<input type="button" value="提前" onclick="tiqian()">
<input type="button" value="置后" onclick="zhihou()">
选中的层&nbsp;<span id="a"></span>&nbsp;(点击选中层)
<SCRIPT LANGUAGE="JavaScript">
var fdiv = null;
function f(oid)
{
    fdiv=oid;
    document.getElementById("a").innerHTML = fdiv;
}function   tiqian() 
{ 
        if   (fdiv==null)   return; 
        //   寻找zIndex大于选中的，并且最接近的那个 
        var   nextDiv   =   null; 
        var   nextIndex   =   999999; 
        var   selectdiv=document.getElementById(fdiv);
        var   fIndex   =   document.getElementById(fdiv).style.zIndex; 
        var divs = document.getElementsByTagName("div");
        for(var i=0;i<divs.length ;i++ )
        { 
                var   index   = divs[i].style.zIndex;                if   (index> fIndex   &&   index <nextIndex) 
                { 
                        nextDiv=   divs[i]; 
                        nextIndex   =   index; 
                } 
        } 
        //交换zIndex 
        if   (nextDiv) 
        { 
                selectdiv.style.zIndex   =   nextIndex; 
                nextDiv.style.zIndex   =   fIndex; 
        } 
       
} function   zhihou() 
{ 
        if   (fdiv==null)   return; 
        //   寻找zIndex小于选中的，并且最接近的那个 
        var   nextDiv   =   null; 
        var   nextIndex   =   0; 
        var   selectdiv=document.getElementById(fdiv);
        var   fIndex   =   document.getElementById(fdiv).style.zIndex; 
        var divs = document.getElementsByTagName("div"); 
        for(var i=0;i<divs.length ;i++ )
        { 
                var   index   = divs[i].style.zIndex;
                if   (index <fIndex   &&   index> nextIndex) 
                { 
                        nextDiv=   divs[i]; 
                        nextIndex   =   index; 
                } 
        } 
        
        
        //交换zIndex 
        if   (nextDiv) 
        { 
           selectdiv.style.zIndex   =   nextIndex; 
                nextDiv.style.zIndex   =   fIndex; 
        } 
} </script>