Javascript之DOM简单编程

最新推荐文章于 2024-04-03 02:59:47 发布

living_ren

最新推荐文章于 2024-04-03 02:59:47 发布

阅读量161

点赞数

分类专栏：小程序

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

版权

小程序专栏收录该内容

125 篇文章 1 订阅

订阅专栏

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

living_ren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript之DOM简单编程

div变化 DOM编程习题 //取得盒子标签 function divs(){ var div=document.getElementsByTagName('div'); return div; } function ch
复制链接

扫一扫

专栏目录