JS操作DIV全属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="/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 ElementById("testdiv");
        el.innerHTML="测试数据！";
    }
    //控制位置
    function setlocation()
    {
        var ElementById("testdiv");
        p="100px";
        el.style.left="100px";
    }
    //设置背景
    function setbrcolor()
    {
        var ElementById("testdiv");
        el.style.backgroundColor="#997788";
    }
    //设置背景图
    function setbrimg()
    {
        var ElementById("testdiv");
        el.style.backgroundImage="url(img.jpg)";
    }
    //设置字体
    function setfont()
    {
        var ElementById("testdiv");
        lor="#FFFFFF"//设置字体
        el.style.fontSize="15px";
        el.style.fontWeight="bold";
    }
    //设置calss样式
    function setcss()
    {
        var ElementById("testdiv");
        el.className="test";
    }
       
html代码属性大全   
    //获得键盘按键并操作DIV上下左右移动 top left 必须加px
    function GetKey(e)
    { 
        var ElementById("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")//上
        {
            p=(parseInt(p==""?"0":p)-1)+"px";
        }else if(Key=="40"){//下
       
            p=(parseInt(p==""?"0":p)+1)+"px";
        }       
    }
    keyup = GetKey;//附加键盘按下事件
 
 
   
// --></mce:script>
</head>
<body  mce_>
<div id="testdiv" ></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>
Div的一些基本属性
left 相对于窗口左边的位置
top 相对于窗口上边的位置
width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。
height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。
color（字体颜）：彩代码；
font-size（字体大小）：数值；
line-height（行高）：数值；
border（边框）：宽度、类型和颜，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
font-weight（字体粗细）：normal、bold、bolder、lighter；
font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆
clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。
z-index DIV tag 的立体位置。值越大 DIV 的位置越高。
background-color DIV 背景的颜。
layer-background-color Netscape 的 DIV 背景颜。
background-image DIV 的背景图象。
layer-background-image Netscape 的 DIV 的背景图象
filter:chroma(COLOR=转换成透明的颜)（chroma过滤器）：彩代码，该颜将转换成透明效果；
word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；
direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）;
padding-left：层中的内容距离层左边框的距离；padding-right：层中的内容距离层左边框的距离；padding-top：层中的内容距离层顶部边框的距离；padding-bottom：层中的内容距离层底部边框的距离。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。