Javascript之DOM简单编程

来源：互联网发布：赤峰市用友软件销售编辑：程序博客网时间：2024/05/16 06:18

<!DOCTYPE html>

<html>
<head>
   <meta charset="utf-8">
   <title>div变化</title>
</head>
<body>
   <hr><br>
   <h1>DOM编程习题</h1>
   <div style="height:100px;width:200px;background:yellow;"></div><br>
   <hr>
   <input type="button" value="变长" onclick="changeWider()">
   <input type="button" value="变窄" onclick="changeShorter()">
   <input type="button" value='变色'>
</body>
<script type="text/javascript">
   //取得盒子标签
   function divs(){
       var div=document.getElementsByTagName('div');
       return div;
   }

   function changeWider(){
       var div=divs();
       //alert(width[0].style.width);
       var width_num=parseInt(div[0].style.width);
       width_num+=3;
       div[0].style.width=width_num+'px';
   }

   function changeShorter(){
       var div=divs();
       var height_num=parseInt(div[0].style.height);
       height_num-=3;
       div[0].style.height=height_num+'px';
   }

   //自动加载动态调用
   onload=function(){
       var changeColor_obj=document.getElementsByTagName('input')[2];

       changeColor_obj.onclick=changeColor;//changeColor此处是一个函数
   }

   function changeColor(){
       var div=divs();
       var newcolor=new Array('red','black','green','pink','blue');
       var num=Math.floor(Math.random()*5);
       div[0].style.background=newcolor[num];
   }

   /*另外一种通过onclick事件加载
   function changeColor(){
       var div=divs();
       //var color='background-color';
       var color=div[0].style.background;
       var newcolor=new Array('red','black','green','pink','blue');
       var num=Math.floor(Math.random()*5);
       //此处赋值的对象切记不是color,color是一个字符串不能接收值
       div[0].style.background=newcolor[num];
       //+" none repeat scroll 0% 0%";
       //alert(newcolor[num]+" none repeat scroll 0% 0%");
   }
   */
</script>
</html>

阅读全文

0 0