【转载】JS操作DIV全属性

最新推荐文章于 2023-05-14 14:13:13 发布

原创最新推荐文章于 2023-05-14 14:13:13 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了使用JavaScript来控制HTML页面中DIV元素的各种方法，包括调整内容、位置、背景色等，并提供了完整的代码示例。

 
     view plain
   

<!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.getElementByIdx_x("testdiv");
el.innerHTML="测试数据！";
}
//控制位置
function setlocation()
{
var el=document.getElementByIdx_x("testdiv");
el.style.top="100px";
el.style.left="100px";
}
//设置背景色
function setbrcolor()
{
var el=document.getElementByIdx_x("testdiv");
el.style.backgroundColor="#997788";
}
//设置背景图
function setbrimg()
{
var el=document.getElementByIdx_x("testdiv");
el.style.backgroundImage="url(img.jpg)";
}
//设置字体
function setfont()
{
var el=document.getElementByIdx_x("testdiv");
el.style.color="#FFFFFF"//设置字体
el.style.fontSize="15px";
el.style.fontWeight="bold";
}
//设置calss样式
function setcss()
{
var el=document.getElementByIdx_x("testdiv");
el.className="test";
}
//获得键盘按键并操作DIV上下左右移动 top left 必须加px
function GetKey(e)
{
var el=document.getElementByIdx_x("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">
<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="控制层内容" onclick="settext()" />
<input type="button" value="控制层位置" onclick="setlocation()" />
<input type="button" value="控制层背景色" onclick="setbrcolor()" />
<input type="button" value="控制层背景图" onclick="setbrimg()" />
<input type="button" value="控制层文字" onclick="setfont()" />
<input type="button" value="控制层css" onclick="setcss()" />
</body>
</html>