<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS操作DIV全攻略</title> <mce:style><!-- .test{width:200px; height:200px; background-color:Red;font-size:12px; font-weight:normal;border:solid 1px red;} --></mce:style><style mce_bogus="1"> .test{width:200px; height:200px; background-color:Red;font-size:12px; font-weight:normal;border:solid 1px red;} </style> <mce:script type="text/javascript"><!-- //控制内容 function settext() { var el=document.getElementById("testdiv"); el.innerHTML="测试数据！"; } //控制位置 function setlocation() { var el=document.getElementById("testdiv"); el.style.top="100px"; el.style.left="100px"; } //设置背景色 function setbrcolor() { var el=document.getElementById("testdiv"); el.style.backgroundColor="#997788"; } //设置背景图 function setbrimg() { var el=document.getElementById("testdiv"); el.style.backgroundImage="url(img.jpg)"; } //设置字体 function setfont() { var el=document.getElementById("testdiv"); el.style.color="#FFFFFF"//设置字体 el.style.fontSize="15px"; el.style.fontWeight="bold"; } //设置calss样式 function setcss() { var el=document.getElementById("testdiv"); el.className="test"; } //获得键盘按键并操作DIV上下左右移动 top left 必须加px function GetKey(e) { var el=document.getElementById("testdiv");//获得DIV e=e||event;//兼容IE FF var Key=e.keyCode||e.which||e.charCode;//获得键盘码 //alert(Key);//弹出KEY值 if(Key=="39")//右 { el.style.left=(parseInt(el.style.left==""?"0":el.style.left)+1)+"px"; }else if(Key=="37")//左 { el.style.left=(parseInt(el.style.left==""?"0":el.style.left)-1)+"px"; }else if(Key=="38")//上 { el.style.top=(parseInt(el.style.top==""?"0":el.style.top)-1)+"px"; }else if(Key=="40"){//下 el.style.top=(parseInt(el.style.top==""?"0":el.style.top)+1)+"px"; } } document.onkeyup = GetKey;//附加键盘按下事件 // --></mce:script> </head> <body style="margin:0px" mce_style="margin:0px"> <!-- position:absolute 如果控制移动必须加上这个 --> <div id="testdiv" style="width:100px; height:100px; background-color:#d3d3d3; position:absolute;"></div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />上下左右可以操作DIV，已兼容IE FF<br /> <input type="button" value="控制层内容" οnclick="settext()" /> <input type="button" value="控制层位置" οnclick="setlocation()" /> <input type="button" value="控制层背景色" οnclick="setbrcolor()" /> <input type="button" value="控制层背景图" οnclick="setbrimg()" /> <input type="button" value="控制层文字" οnclick="setfont()" /> <input type="button" value="控制层css" οnclick="setcss()" /> </body> </html>
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
