JS操作DIV全属性

最新推荐文章于 2025-05-23 16:31:08 发布

xuewuzhijing10

最新推荐文章于 2025-05-23 16:31:08 发布

阅读量3.9k

点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />上下左右可以操作DIV，已兼容IE FF<br />

</body>

</html>