如何利用单击改变div的z-index

程序已经改好，请查看，最好把题目改成100分花去我1个多小时了1。点方块可移动。点击后zindex变成所有方块中最大，同时在方块中显示zindex
2。可以给任何一个方块改颜色。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript">
var span_create=null;
var span_size=null;var o=0;p="";currentSpan=null;maxIndex=2;
function create_span(){
var leftnum=Math.random();
var leftnum=Math.round(leftnum*880);//创建div_create_label标签的left的随机数
var topnum=Math.random();
var topnum=Math.round(topnum*580);//创建div_create_label标签的top的随机数
span_create=document.createElement("span");
span_size=document.createElement("span");
span_size.id=++o;
span_create.id="as"+o;
span_create.style.position="absolute";
span_size.style.position="absolute";
span_create.style.setAttribute("left","100");
span_create.style.setAttribute("top","100");
span_create.style.setAttribute("width","0px");
span_create.style.setAttribute("height","0px");
span_create.style.setAttribute("z-index","1");
//span_create.style.setAttribute("border","10 solid #123456");
span_size.style.setAttribute("left","100");
span_size.style.setAttribute("z-index","1");
span_size.style.setAttribute("top","100");
span_size.style.setAttribute("width","100");
span_size.style.setAttribute("height","100");
span_size.style.setAttribute("backgroundColor","#00cc00");
span_size.style.setAttribute("border","2 solid #123456");
document.body.appendChild(span_create);
span_create.appendChild(span_size);
span_create.contentEditable=true;
span_size.attachEvent("onmouseup",m);
currentSpan=span_size;
function m()
  {//（2）在div_create_label上click时//改变div_create_label的zIndex的位置为最上
if(event.srcElement.parentElement.style.zIndex<maxIndex)event.srcElement.parentElement.style.zIndex=++maxIndex;
event.srcElement.innerText=event.srcElement.parentElement.style.zIndex;
currentSpan=event.srcElement;
}//（2）
}
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
var colorpanel=null;function intocolor()
{var cl=document.getElementById("colorpanel");
cl.style.visibility="visible";
cl.style.left=(parseInt(span_size.style.left)+100);//调色板left位置
cl.style.top=span_size.style.top;//调色板top位置
var colorTable=''
for (i=0;i<2;i++)
{
  for (j=0;j<6;j++)
   {
    colorTable=colorTable+'<tr height=12>'
    colorTable=colorTable+'<td width=11 style="background-color:#000000">'

    if (i==0){
    colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'}
    else{
    colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'}
    colorTable=colorTable+'<td width=11 style="background-color:#000000">'
    for (k=0;k<3;k++)
     {
       for (l=0;l<6;l++)
       {
        colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
       }
     }
  }
}
colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
           +'<tr height=20><td colspan=18 bgcolor=#cccccc  align="right" >'+'<span onclick="del()"style="cursor:hand">'+'x'+'</span>'
           +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'
           +colorTable+'</table>';
cl.innerHTML=colorTable
}function doOver() {
      if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {
        if (current!=null){current.style.backgroundColor = current._background}
        event.srcElement._background = event.srcElement.style.backgroundColor
        event.srcElement.style.backgroundColor = "white"
        current = event.srcElement
      }
}function doOut() {
    if (current!=null) current.style.backgroundColor = current._background
}function doclick(){
if (event.srcElement.tagName=="TD"){
//alert("选取颜色: "+event.srcElement._background)
currentSpan.style.background=event.srcElement._background;
//return event.srcElement._background
}
}
function del()//在div_del_label上click时，div_create_label删除，div_del_label隐藏
{//（6）
var cl=document.getElementById("colorpanel");
cl.style.visibility="hidden"
}</script>
<script language="JavaScript">
document.execCommand('2D-Position',false,true);
</script>
</head><body>

<input type="button" name="Submit" value="按钮" onClick="create_span()">
<input type="button" name="Submit2" value="添加背景色" onClick="intocolor()">
<div id="colorpanel" style="position: absolute;   visibility: hidden;">
  　</div></body>
</html>

调试易

如何利用单击改变div的z-index

解决方案 »