javascrip总结42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    
    .one{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    
    
  </style>
</head>
<body>
<div id="box"></div>

<script>
  //1. 获取元素
  var box = document.getElementById('box');
  //2. 添加一些默认样式
  box.className = 'one';
  //3. 给box注册点击事件
  box.onclick = function(){
      //4. 在事件处理函数中,修改box的位置和背景颜色
      box.style.position = 'absolute';
      box.style.left = '300px';
      box.style.top = '150px';
  }
  
</script>
</body>
</html>

 

posted @ 2018-05-08 11:56  前端邢晋宇  阅读(444)  评论(0)  编辑  收藏  举报