Javascript之DOM简单编程

<!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="变长" οnclick="changeWider()">

   <input type="button" value="变窄" οnclick="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';

   }

   //自动加载动态调用

   οnlοad=function(){

       var changeColor_obj=document.getElementsByTagName('input')[2];

changeColor_obj.οnclick=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>

原文链接：https://blog.csdn.net/living_ren/article/details/78821806

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《Javascript之DOM简单编程》